dialog必须调用showModal()才真正模态：它激活浏览器模态栈，禁滚动、捕获Tab、响应Esc；open属性仅控制可见性，不触发模态逻辑。
dialog必须调用showModal()才真正模态
写了<dialog></dialog>却没弹出来？不是 bug，是设计如此。dialog默认不渲染、不占布局、不响应任何交互——它就是个“待命状态”的语义容器。只加open属性等价于调用show()，有显示但无遮罩、无焦点锁定、Esc 不生效、Tab 键能直接跳出。真正激活模态行为的唯一入口是showModal()：它会接管浏览器模态栈，禁底层滚动、捕获 Tab、响应 Esc、自动 returnFocus。
常见错误包括：
- 脚本执行早于 DOM 加载 →
document.querySelector('dialog')返回null，调showModal()报Cannot read property 'showModal' of null - 把
dialog套在transform或overflow: hidden的父容器里 → Safari/Chrome 中::backdrop被裁剪或错位 - 误以为
open属性 = 模态开关 → 实际上它只是可见性标记，不触发任何模态逻辑
点击遮罩关闭必须手动监听 click 并判断 e.target
::backdrop 不是真实 DOM 节点，没有 class、不冒泡带来源信息、无法直接绑定事件。所谓“点击遮罩”，浏览器实际派发的是 dialog 元素上的 click 事件，且 e.target === dialog 才代表点在遮罩区域（而非内部按钮或输入框）。
安全写法是：
立即学习“前端免费学习笔记（深入）”；
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
但要注意兼容性陷阱：
- Safari 15.4–16.3 中
e.target常为body，需 fallback 坐标判断：e.clientX < dialog.getBoundingClientRect().left - Firefox 不触发该 click 事件（即使点了 backdrop），此时只能依赖 Esc 键 + 显式关闭按钮
- 千万别写
dialog.onclick = dialog.close—— 一点内容区就关了
表单提交不刷新的关键是 method="dialog"
放在 <dialog> 里的 <form> 默认仍走整页 submit，dialog.close() 根本来不及执行。最简解法是加 method="dialog" 属性：
<dialog id="confirmDialog">
<form method="dialog">
<button value="confirm">确定</button>
<button value="cancel">取消</button>
</form>
</dialog>
提交后自动关闭，并设 dialog.returnValue 为对应 value。需要异步处理（如 fetch）时，则必须在 submit 事件中 e.preventDefault()，再手动 dialog.close()。
注意：dialog.close() 在 Safari 中不返回 Promise，不能 await；要用 close 事件监听返回值：
dialog.addEventListener('close', () => {
console.log('return value:', dialog.returnValue); // "confirm" / "cancel" / ""
});
样式重置和兼容性检测不能省
dialog 浏览器默认样式差异极大：Chrome 给 16px margin，Safari 可能无圆角、深色背景配深色文字、::backdrop 透明不可见。不重置就会布局错乱或内容不可读。
基础样式建议：
dialog {
margin: 0;
padding: 1em;
border: none;
border-radius: 8px;
background: #fff;
color: #333;
max-width: 90vw;
max-height: 90vh;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
运行时兼容性检测比 @supports (display: dialog) 更可靠：
if (typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype) {
// 可安全使用
} else {
// 启动 polyfill 或降级到 div 方案
}
别只靠 CSS 隐藏原生 dialog 再 show 一个 div——焦点管理、Esc 键、Backdrop 逻辑全得手写，复杂度不比从零造轮子低。真要兼容 iOS 15 或旧版 WebView，直接用 dialog-polyfill 更省心。
