dialog必须是body直接子元素才能正确渲染backdrop，否则safari和部分chrome下遮罩缺失；open仅控制初始可见性，showmodal()才启用模态栈；点击backdrop关闭需手动监听并兼容safari坐标bug；form提交应使用method="dialog"防刷新。
dialog必须是body直接子元素才能正确渲染backdrop
否则 Safari 和部分 Chrome 版本下 ::backdrop 根本不出现，遮罩层缺失导致背景可点击、无视觉隔离。这不是样式问题，而是浏览器对 dialog 定位上下文的硬性要求。
常见错误结构：<div class="app"><dialog></dialog></div> 或嵌套在 <form></form>、<main></main> 里。这些父容器的 position: relative、transform、overflow 都会干扰 dialog 的内置居中和 backdrop 渲染逻辑。
- ✅ 正确写法：
<dialog id="confirm-dialog"></dialog> - ❌ 错误写法：
<main><dialog></dialog></main>或<div style="position: relative"><dialog></dialog></div> - 若用框架（如 React/Vue），需确保挂载点为
document.body，不能用组件内部的 wrapper div
showModal() 才真正激活模态栈，open 属性只是初始状态标记
open 属性仅控制 DOM 初始是否可见，它不触发任何模态行为：没遮罩、Tab 键能穿透、Esc 不响应、点击背景也不关。很多开发者加了 open 就以为弹出来了，结果用户操作完全不受限制。
真正启用模态能力的唯一入口是 showModal() —— 它会把 dialog 推入浏览器原生模态栈，自动处理焦点锁定、backdrop 渲染、Esc 拦截、滚动锁定。
- 调用前务必确认元素已就绪：
document.addEventListener('DOMContentLoaded', () => { dialog.showModal(); })，否则报Cannot read property 'showModal' of null - 别用
dialog.hidden = false或dialog.style.display = 'block'替代，这绕过原生焦点管理，键盘导航直接失效 -
show()仅适合悬浮提示类场景，它不加 backdrop、不禁 Tab、不响应 Esc，跟div几乎没区别
点击 backdrop 关闭必须手动监听，且 Safari 有坐标 fallback 需求
::backdrop 是伪元素，不可直接绑定事件，规范也明确不支持点击自动关闭。所有“点背景关闭”逻辑都得靠监听 dialog 自身的 click 事件并判断目标。
标准写法是检查 e.target === dialog，但 Safari 15.4–16.3 存在 bug：点击 backdrop 时 e.target 常返回 body 而非 dialog，导致关闭逻辑失效。
- 基础监听：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 兼容 fallback：
if (e.target === dialog || e.clientX rect.right || e.clientY > rect.bottom) - 千万别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效
form 提交刷新问题：method="dialog" 是最简解法
在 dialog 里放 <form></form> 时，如果不做干预，点击提交按钮会触发整页 reload，dialog.close() 根本没机会执行——页面一刷新，弹窗就“消失”了，不是关闭，是重载。
最轻量、最可靠的方案就是利用原生支持：<form method="dialog"></form>。提交后自动关闭 dialog，并将按钮的 value 写入 dialog.returnValue，不刷新页面。
- 需要异步处理（如 fetch）时，必须在
submit事件中调用e.preventDefault()，再手动dialog.close() - 别把
dialog.close()写在按钮的onclick里——用户按回车提交表单时会漏掉 -
dialog.returnValue只在formmethod="dialog"或button[formmethod="dialog"]提交时自动赋值；普通点击不会设置它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
