应使用<dialog>标签，因其语义清晰、原生支持模态行为（showModal()）、焦点管理及无障碍特性，且必须作为<body>直接子元素；禁用display: none切换，须通过open属性控制显隐。
全局搜索浮层该用什么 HTML 结构
用 <dialog> 最合理，不是 <div> + position: fixed 的土办法。现代浏览器（Chrome 98+、Firefox 97+、Safari 15.4+）已原生支持，语义清晰、自带焦点管理、自动阻止背景交互，还能用 showModal() 触发模态行为。
关键点：
-
<dialog>必须是<body>直接子元素，否则showModal()可能失效或触发异常滚动 - 不要手动加
tabindex="-1"——<dialog>默认已处理焦点捕获 - 关闭按钮必须用
<button type="submit">或显式调用close()，不能只靠click+remove()，否则会丢失returnFocus行为 - 若需兼容旧版 Safari（<div role="dialog"> + 手动管理
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> 自带逻辑完成；但若手动管理浮层，则需用 focus-trap 库或手写 focusin 拦截。
还要注意：
- 首次聚焦时清空历史值：
searchInput.value = ''，避免残留上次输入干扰体验 - 不要在
focus回调里再调select()—— 会触发全选，对键盘用户不友好；如需全选，应由用户主动按Ctrl+A - 输入过程中按
Escape应直接关闭浮层并返回原焦点，而非仅 blur 输入框 - 移动端需额外监听
touchstart防止点击穿透，尤其在 iOS Safari 中<dialog>的 backdrop 点击事件有时不冒泡
为什么搜索浮层不能用 display: none 切换显示
因为 display: none 会让元素完全脱离渲染流，<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 切换，实则关系到焦点流、无障碍和浏览器原生模态逻辑是否生效。
