应使用标签，因其语义清晰、原生支持模态行为（showmodal()）、焦点管理及无障碍特性，且必须作为直接子元素；禁用display: none切换，须通过open属性控制显隐。
全局搜索浮层该用什么 HTML 结构
用 <dialog></dialog> 最合理，不是 <div> + <code>position: fixed 的土办法。现代浏览器（Chrome 98+、Firefox 97+、Safari 15.4+）已原生支持，语义清晰、自带焦点管理、自动阻止背景交互，还能用 showModal() 触发模态行为。
关键点：
-
<dialog></dialog>必须是直接子元素，否则showModal()可能失效或触发异常滚动 - 不要手动加
tabindex="-1"——<dialog></dialog>默认已处理焦点捕获 - 关闭按钮必须用
<button type="submit"></button>或显式调用close()，不能只靠click+remove()，否则会丢失returnFocus行为 - 若需兼容旧版 Safari（+ 手动管理
inert和focus快捷键触发搜索框的监听位置和时机
监听必须在
document上，且用keydown（不是keyup），因为用户按住Cmd/Ctrl+K时，要确保浮层在组合键按下瞬间就出现，而不是松开后才响应。常见错误：
- 在搜索框
input元素上监听 —— 失去全局性，页面任意位置都无法触发 - 用
keypress—— 已废弃，且不触发修饰键（Ctrl、Meta）状态 - 没加
event.preventDefault()—— 某些浏览器会触发地址栏聚焦或默认搜索行为 - 未排除
input、textarea、contenteditable等编辑中场景，导致用户打字时意外弹出浮层
推荐写法：
document.addEventListener('keydown', (e) => { if (e.key === 'k' && (e.metaKey || e.ctrlKey) && !isEditing()) { e.preventDefault(); searchDialog.showModal(); searchInput.focus(); } });搜索输入框获得焦点后的行为控制
浮层打开后，
searchInput.focus()是必须的，但仅此不够。用户按Tab时，焦点应限制在浮层内（焦点环不跳到页面其他元素），这靠<dialog></dialog>自带逻辑完成；但若手动管理浮层，则需用focus-trap库或手写focusin拦截。还要注意：
- 首次聚焦时清空历史值：
searchInput.value = ''，避免残留上次输入干扰体验 - 不要在
focus回调里再调select()—— 会触发全选，对键盘用户不友好；如需全选，应由用户主动按Ctrl+A - 输入过程中按
Escape应直接关闭浮层并返回原焦点，而非仅 blur 输入框 - 移动端需额外监听
touchstart防止点击穿透，尤其在 iOS Safari 中<dialog></dialog>的 backdrop 点击事件有时不冒泡
为什么搜索浮层不能用 display: none 切换显示
因为
display: none会让元素完全脱离渲染流，<dialog></dialog>的showModal()将无法正确计算尺寸、定位和 backdrop 层级；更严重的是，它会破坏可访问性：屏幕阅读器无法感知其存在，aria-modal="true"失效，且inert属性不会自动应用到背景内容上。正确做法是用
open属性控制显隐：- 显示时：设置
open属性（dialog.open = true或dialog.setAttribute('open', '')） - 隐藏时：移除
open属性（dialog.removeAttribute('open')），不要设open=""空字符串 - 样式上通过
dialog:not([open]) { display: none; }隐藏，但 DOM 结构始终存在
这个细节常被忽略——看似只是 CSS 切换，实则关系到焦点流、无障碍和浏览器原生模态逻辑是否生效。
- 在搜索框
