必须是的直接子元素，否则会错位或backdrop失效；显隐控制须用showmodal()/close()，open属性仅用于初始化；结构内需含autofocus元素和aria-labelledby标题；点击遮罩关闭需手动监听并兼容safari坐标判断。
dialog 必须是 的直接子元素，否则会错位或 backdrop 失效
浏览器对 <dialog></dialog> 的定位逻辑依赖其作为 直接子节点的身份。一旦嵌套在 <main></main>、<div class="container"> 或任何设置了 <code>position: relative / transform / overflow: hidden 的父容器里，就可能触发以下问题：
- 弹窗偏移、居中失效（尤其在滚动页面后）
-
dialog::backdrop不渲染或被父级z-index截断 - 焦点锁定失败，Tab 键可穿透到背景内容
✅ 正确写法：<dialog id="confirm"></dialog>
❌ 危险结构：<div class="app"><dialog></dialog></div> 或 <form><dialog></dialog></form>
显隐控制必须用 showModal()/close()，open 属性只用于初始化
open 属性不是开关，而是“初始状态标记”。它只在页面加载时生效，且设为 true 会导致模态框一打开就强制弹出，违背用户主动触发原则。
- 调用
showModal()才真正激活：自动添加dialog::backdrop、锁焦点、支持 Esc 关闭、触发close事件 - 用
close()关闭：移除 backdrop、恢复页面交互、触发close事件 - 避免
dialog.open = false：不会移除 backdrop，也不触发事件，后续再调showModal()可能异常
常见报错 Cannot read property 'showModal' of null 多因脚本执行早于 DOM 解析——确保在 DOMContentLoaded 后获取元素，或把 <script></script> 放在 前。
结构内必须含 autofocus 元素和 aria-labelledby 标题
原生 <dialog></dialog> 默认聚焦第一个可聚焦子元素（如 <button></button>），但若内部无 tabbable 元素，焦点会落到 上，破坏模态体验，也违反 WCAG。
- 显式设置
autofocus在首个操作按钮上（如「确认」） - 用
<h2></h2>或<h3></h3>做标题，并通过aria-labelledby关联<dialog></dialog> - 避免空
<dialog></dialog>或仅含纯文本无交互控件
示例结构：<dialog id="confirm" aria-labelledby="confirm-title"><h3 id="confirm-title">确认删除</h3>
<p>该操作不可撤销</p>
<button autofocus>确定</button><button>取消</button></dialog>
点击遮罩关闭需手动监听，Safari 存在坐标判断 fallback
规范明确不支持“点击 backdrop 关闭”，这不是 bug，是设计选择。必须自己监听并区分点击目标。
- 基础写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在
e.target恒为body的 bug，需 fallback 判断坐标：if (e.clientX - 禁用点击关闭？加
oncancel="event.preventDefault()"即可阻止 Esc 和 backdrop 点击默认行为 - 切勿给
<dialog></dialog>设pointer-events: none，这会让showModal()的焦点锁定彻底失效
真正容易被忽略的点在于：backdrop 点击关闭不是开箱即用的功能，而是一个需要跨浏览器验证的手动补丁；且 Safari 的兼容处理不能只靠 e.target 判断，必须结合几何坐标兜底。
