dialog.showmodal() 是唯一触发模态行为的方法；直接写 标签或设 open 属性仅控制可见性，不启用遮罩、焦点锁定及 esc 响应。
dialog.showModal() 是唯一能触发模态行为的方法
直接写 <dialog></dialog> 标签不会显示，哪怕加了 open 属性，也只让元素可见，但没遮罩、不锁焦点、Esc 不响应。真正激活模态逻辑的只有 showModal() —— 它会自动居中、禁用背景交互、聚焦第一个可聚焦子元素，并监听 Esc 和 backdrop 点击（在支持的浏览器中）。
常见错误是误用 show()：它只是浮层，背景仍可点击，Tab 键能穿出，用户极易误操作。除非你明确需要非模态浮窗（比如工具提示），否则别碰 show()。
- 调用前必须确保 DOM 已挂载：
document.getElementById('myDialog')返回null？检查 script 是否在底部，或包裹在DOMContentLoaded里 - 不要手动增删
open属性来控制显隐 —— 它和模态行为无关，仅影响 CSS 层面的display，且可能干扰 JS 状态判断 - 首次调用
showModal()后，dialog.open属性变为true；close()后自动变回false，但 DOM 节点仍在
点击遮罩关闭需手动监听 click 事件
<dialog></dialog> 的 backdrop 点击默认不关闭，这不是 bug，是规范行为。Chrome/Edge 120+ 支持通过 e.target === dialog 判断是否点在 backdrop 上；Safari 目前完全不暴露 backdrop 节点，e.target 始终是 或 。
稳妥做法是监听 click 并做目标校验：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
- 千万别写
dialog.addEventListener('click', () => dialog.close())—— 这会让点击内部按钮也触发关闭 - Safari 下该判断失效时，可用
event.composedPath().includes(dialog)辅助检测，但仍有兼容风险 - 更可靠的是放弃原生 backdrop，额外加一层
<div class="backdrop"> 手动控制显隐和点击 <h3>表单提交后 dialog 消失？多半忘了 preventDefault()</h3> <p>在 <code><dialog></dialog>里放<form></form>很常见，但 type="submit" 按钮会触发表单默认提交，导致页面刷新 —— 看似 dialog “闪退”，其实是整个页面 reload 了。- 给 form 绑定
submit事件，第一件事就是e.preventDefault() - 推荐使用
method="dialog"的 form：提交后自动调用dialog.close()，且不刷新页面，但只适用于简单场景（如带value的按钮） - 关闭后记得重置表单：清空
input、恢复按钮文字、清除验证状态，否则下次打开还是脏数据 - 如果用
fetch提交，注意FormData在 Safari 中对file字段的支持不稳定，建议转为JSON提交并设form.enctype = 'application/json'
Safari 兼容性是最大落地障碍
Safari 15.4+ 才开始支持
<dialog></dialog>，但至今（Safari 17.6）仍有硬伤：不支持close('confirmed')的返回值写入dialog.returnValue，showModal()后焦点可能不自动落在第一个可聚焦元素上，且父容器含transform或will-change时 dialog 会错位甚至消失。- 降级方案不是“可选”，而是“必须”：引入
dialog-polyfill并调用dialogPolyfill.registerDialog(dialog) - 不要依赖
dialog::backdrop实现交互逻辑 —— 它纯属样式层，Firefox 不支持，Safari 支持不全 - 避免在
<dialog></dialog>内使用position: fixed子元素，Safari 渲染异常概率极高 - 每次
showModal()后，手动dialog.querySelector('input, button')?.focus()，比等浏览器自动聚焦更稳
dialog的价值不在“省代码”，而在语义正确和可访问性提升。但它的坑集中在 Safari 和焦点管理上，绕不开，只能靠封装兜底。 - 给 form 绑定
