原生 dialog 标签是浏览器唯一真正接入系统级模态栈的元素，必须调用 showmodal() 才激活遮罩、焦点锁定、esc 关闭等能力；需为 body 直接子元素，点击遮罩关闭须手动监听并兼容 safari 坐标 fallback，表单提交应使用 method="dialog"。
原生 dialog 标签不是“更轻量的替代方案”，而是浏览器唯一能真正接入系统级模态栈的 HTML 元素——它不依赖 JS 模拟遮罩、不手动 trap 焦点、不劫持 Esc，这些能力由浏览器内核直接保障。
为什么 showModal() 调用后才真正生效
写了 <dialog></dialog> 但页面上什么都没有？不是 CSS 问题，是浏览器根本没启动它。原生 dialog 默认跳过布局与绘制，getBoundingClientRect() 返回空值，open 属性只影响初始可见性，不触发任何模态逻辑。
必须调用 showModal() 才会：
- 插入
::backdrop并渲染遮罩层 - 禁用背景页 Tab 导航和点击交互
- 自动聚焦第一个可聚焦子元素（如
<button></button>） - 注册全局 Esc 键监听并自动关闭
用 show() 或手动设 dialog.style.display = 'block' 都绕过这套机制，Tab 键直接穿透、Esc 不响应、遮罩不出现——等于白写。
dialog 必须是
嵌套在 <main></main>、<div class="app"> 或带 <code>transform/position: relative 的容器里，会导致 Safari 和部分 Chrome 版本下 ::backdrop 完全不渲染，遮罩缺失，背景可点。
常见错误结构：
<div id="root"><dialog></dialog></div><form><dialog></dialog></form>
正确写法只有一种：<dialog id="confirm-dialog"></dialog>。框架项目（如 React/Vue）需确保挂载到 document.body，不能留在组件内部 wrapper 中。
点击遮罩关闭必须手动监听，且 Safari 有坐标 fallback
::backdrop 是伪元素，不可绑定事件，规范也不支持点击自动关闭。所有“点背景关窗”逻辑都得靠监听 dialog 自身的 click 事件，并判断目标是否为 dialog 元素本身。
标准写法：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
但 Safari 15.4–16.3 存在 bug：点击 backdrop 时 e.target 常返回 body，导致判断失效。必须加坐标 fallback：
- 检查
e.clientX - 或
e.clientY
千万别给 dialog 设 pointer-events: none，这会让 showModal() 的焦点锁定彻底失效。
表单提交不刷新的关键是 method="dialog"
把 <form></form> 放进 <dialog></dialog> 后，如果不处理，默认提交会整页 reload，弹窗“闪退”。最简解法就是加属性：
提交后自动触发 dialog.close()，并把按钮的 value 写入 dialog.returnValue。注意：
- 按钮必须带
value属性，否则returnValue为空 - 不能在
submit事件中调用e.preventDefault()，否则关闭逻辑被拦截 - Safari（截至 v17.6）对
returnValue支持不稳定，不要依赖它传关键数据
需要异步提交（如 fetch）时，才必须 e.preventDefault()，再手动 dialog.close()。
真正难的从来不是写出 <dialog></dialog> 标签，而是确保它在 Safari、旧版 Chrome、iOS WebView 里行为一致——焦点不逃逸、遮罩不消失、Esc 不失灵、屏幕阅读器能识别。这些细节一旦漏掉，原生优势就全没了。
