dialog未显示的根本原因是DOM位置不当或执行时机错误：必须作为body直接子元素且脚本需在DOM就绪后执行，否则Safari等浏览器无法正确激活模态行为。
为什么dialog写了却没显示？DOM位置和执行时机最关键
不是代码写错了，而是dialog根本没被浏览器当作可激活元素处理。它必须是<body>的直接子元素，嵌套在<div class="app">或<main>里，Safari 和部分 Chrome 就会漏掉遮罩层，甚至整个弹窗不可见。
脚本执行早于 DOM 就绪也常见：比如把document.querySelector('dialog').showModal()放在<head>里，结果报Cannot read property 'showModal' of null。
- 确保
<dialog>标签写在</body>前，且不被任何容器包裹 - 脚本要么放
</body>上方，要么用DOMContentLoaded包装 - 别手动加
open属性——showModal()会自动设，删它等于关窗 - 避免父级有
transform、will-change或overflow: hidden，否则弹窗可能偏移或被裁剪
showModal()和close()必须成对使用，别碰open属性
showModal()是唯一能触发完整模态行为的方法：锁背景、焦点锁定、Esc 关闭、点击 backdrop 关闭。用show()或直接设open，只是让内容可见，但没遮罩、没焦点管理、键盘交互全失效。
关闭时也必须用dialog.close()，而不是dialog.open = false或dialog.removeAttribute('open')——后者会导致 backdrop 残留、close事件不触发、后续showModal()调用异常。
立即学习“前端免费学习笔记（深入）”；
- 打开只认
showModal()；关闭只认close() -
dialog.returnValue在 Safari 中始终为空字符串，不能依赖它传值 - 关闭后焦点不会自动回退，需手动调用
triggerBtn.focus()，否则键盘用户卡死 - 表单提交用
method="dialog"时，按钮必须带value属性，否则returnValue拿不到值
点击遮罩关闭弹窗，e.target === dialog在 Safari 里不靠谱
Chrome/Edge 可以靠e.target === dialog精准判断是否点在遮罩上，但 Safari（截至 v17.6）里这个判断基本失效——事件路径不可靠，e.target经常指向内部元素，哪怕你点的是空白处。
dialog::backdrop是纯样式伪元素，不能绑事件、不能读状态，想监听点击必须作用于dialog本身。
- 兼容写法：监听
dialog的click，再用坐标判断e.clientX是否落在dialog.getBoundingClientRect()范围外 - 别在
dialog上用stopPropagation()或preventDefault()，这会破坏屏幕阅读器和 Esc 行为 - 真要禁用 backdrop 关闭，别拦截事件，改用
<div role="dialog">+ 手动状态管理，并设aria-modal="true"
dialog::backdrop样式失效？降级方案比硬扛更稳
dialog::backdrop在 Safari 里只能改background-color透明度（如rgba(0,0,0,0.4)），设纯色会被忽略；旧版安卓 WebView（如 UC、QQ 内核）则完全不支持该伪元素。
更隐蔽的问题是全局 CSS 重置（比如* { all: unset }）会干掉::backdrop所有默认样式，连透明度都不剩。
- 主方案：先写
dialog::backdrop { background: rgba(0,0,0,0.5); } - 降级方案：JS 动态插入同级
<div class="dialog-backdrop">，同步控制显隐，注意z-index必须高于dialog - 避免在
::backdrop里用filter或transform，移动端易卡顿 - 别指望
::backdrop能响应pointer-events——它天生就是透传事件的
真正难的不是写出dialog标签，而是 Safari 对showModal()的三处不一致：backdrop 渲染异常、returnValue始终为空、click事件目标不可靠。这些没法靠“多试几次”解决，得在设计阶段就接受它们的存在，并准备对应的降级路径。
