dialog.showModal() 仅首次尝试聚焦首个可聚焦子元素，不控制后续 Tab 循环；若无有效可聚焦项或渲染延迟，焦点会逃逸至 body。
dialog.showModal() 会自动聚焦，但为什么焦点还是跑出去了
因为 showModal() 只保证「首次打开时尝试聚焦第一个可聚焦子元素」，它不负责后续的 Tab 键循环控制。如果弹窗内没有可聚焦元素（比如全是 div + tabindex="-1"），或者 DOM 渲染延迟导致查询为空，showModal() 就会退而聚焦到 <dialog> 自身——而该元素默认不可键盘聚焦（除非显式设 tabindex="-1"），结果就是焦点实际落在 body 上，用户一按 Tab 就逃逸。
常见错误现象：
• 打开弹窗后按 Tab，焦点跳到地址栏或页面顶部按钮
• 屏幕阅读器读完标题就停住，不继续读表单字段
• 移动端 VoiceOver 点击弹窗区域无响应
- 必须手动预查并确保至少一个子元素满足可聚焦条件：
button、input、select、textarea或带tabindex="0"的元素 - 若弹窗内容异步加载（如 fetch 后插入表单），不能在
showModal()后立刻querySelector，要用requestAnimationFrame()或监听dialog:open（需 polyfill 支持） - 不要依赖
dialog根元素的tabindex值做兜底——即使设了tabindex="-1"，Safari 和部分屏幕阅读器仍可能拒绝聚焦不可见/未渲染的容器
怎么写一个真正可靠的焦点陷阱循环逻辑
别监听 keydown 拦 Tab——这会破坏 NVDA、JAWS 的内置导航键（如 Insert+F7 列表），也干扰 macOS VoiceOver 的方向键模式。正确做法是监听 focusin，只在焦点即将离开容器时干预。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 用
Array.from(dialog.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])'))预收集所有有效可聚焦项，存为实例属性（避免每次重复查询） - 监听
dialog的focusin事件，检查event.target是否属于该数组；如果不是，说明焦点从外部进入——此时应立即first?.focus() - 当
event.target === last且!event.shiftKey，或event.target === first且event.shiftKey，才执行折返first.focus()/last.focus()，并调用event.preventDefault() - 务必在
dialog.close()前移除该监听器，否则多个弹窗叠加时会互相干扰
关闭 dialog 时焦点没回原处，问题出在哪
不是没存触发元素，而是存的方式错了。闭包里直接引用 document.querySelector('#trigger-btn') 返回的 DOM 节点，在 SPA 页面路由切换或组件重渲染后，该节点很可能已从文档中移除，.focus() 静默失败，且无报错。
实操建议：
- 打开前把触发元素 ID 存进
dialog.dataset.triggerId = 'trigger-btn'，关闭时再用document.getElementById(dialog.dataset.triggerId)查找 - 调用
.focus()前加校验：if (el && el.offsetParent !== null && el.tabIndex >= 0) - 不要用
document.activeElement记录来源——弹窗关闭瞬间它常是body或dialog自身，不是你想要的按钮 - 如果触发源是动态生成的（如表格行操作按钮），改用事件委托 +
data-*属性传递上下文，而非依赖节点引用
polyfill 场景下 focus trap 容易被忽略的兼容点
dialog-polyfill 注册后，showModal() 行为模拟接近原生，但焦点管理仍是半托管状态：它会帮你初始聚焦、拦截 Esc、添加 backdrop，但不实现焦点循环。你写的 trap 逻辑必须兼容 polyfill 注入的 .backdrop 元素——它和 dialog 是兄弟节点，不是子节点，所以 focusin 监听必须挂载在 document 或外层容器，不能只绑 dialog。
其他坑点：
- iOS Safari 中，
focus()对display: none或visibility: hidden元素静默失败，确保弹窗显示后再执行聚焦（dialog.open属性为 true 后） - 某些 polyfill 版本会把
dialog插入body底部，导致querySelector查不到嵌套在组件内部的触发按钮——得用全局 ID 或data-属性跨层级关联 -
aria-modal="true"必须显式加在dialog上，否则 NVDA 在 IE11 + polyfill 组合下无法识别模态上下文，焦点仍可逃逸
复杂点在于：同一个页面可能混用原生 <dialog> 和 polyfill 实例，trap 逻辑要能区分运行时环境，而不是一刀切地监听所有 dialog 元素。
