dialog 是语义容器，需调用 showModal() 或设 open 属性才显示；点击 backdrop 不自动关闭，须手动监听；Safari 兼容性差，焦点管理易出错，::backdrop 样式受限且不可 JS 操作。
dialog 标签本身不自动显示，也不自带点击 backdrop 关闭、ESC 外部关闭、动画或居中逻辑——它只是个语义容器，必须配合 showModal() 和手动补全交互逻辑才能用起来。
为什么写了 dialog 却完全没反应
因为 dialog 默认 display: none，且不响应任何用户操作，除非你显式调用 showModal() 或设置 open 属性。
- 直接写
<dialog open>...</dialog>可初始显示，但 Safari 15.4 以下不支持open属性，会静默失败 - 仅靠 CSS 设置
display: block或visibility: visible无效，浏览器会忽略 - 调用
close()前必须确保dialog已打开（即有open属性），否则抛错：Failed to execute 'close' on 'HTMLDialogElement': The element does not have an 'open' attribute -
show()不锁屏、不加 backdrop、不聚焦，适合非模态浮层；showModal()才是真正模态行为的起点
如何让点遮罩层（backdrop）关闭弹窗
原生 dialog 的 showModal() 模式下，点击 backdrop **不会自动触发关闭**——这是规范行为，不是 bug。你得自己监听并判断。
- 最简方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–16.3 存在兼容问题：点 backdrop 时
e.target可能是body，需 fallback 判断坐标：const rect = dialog.getBoundingClientRect(); if (!rect.contains(e.clientX, e.clientY)) dialog.close(); - 不要给
dialog设pointer-events: none，这会破坏原生焦点锁定和键盘导航 - 避免在
dialog内部元素上绑定onclick="this.closest('dialog').close()"，closest()在 IE 中不可用，且语义混乱
dialog::backdrop 样式为什么不起作用
::backdrop 是伪元素，仅在 showModal() 调用后才存在，且 Safari 对它的支持有限（如不支持 backdrop-filter、部分属性被忽略）。
立即学习“前端免费学习笔记（深入）”；
- CSS 必须写成
dialog::backdrop { background: rgba(0,0,0,0.5); }，不能省略dialog前缀 - Chrome/Edge 支持完整 backdrop 样式；Firefox 支持但部分属性（如
animation）无效；Safari 15.4+ 仅支持基础背景色，backdrop-filter需要额外 polyfill 或降级处理 - 不要试图用 JS 操作
::backdrop（它不可选中），所有样式必须走 CSS - 若需动画，只能对
dialog本体做opacity+transform过渡，::backdrop不参与 CSS 动画
焦点总跑出弹窗？检查第一个可聚焦子元素
showModal() 会尝试聚焦第一个「可聚焦且未禁用」的子元素（如 <button>、<input>），但若首子是 <div>、<h3> 或 tabindex="-1"，焦点就留在页面，Tab 键会直接跳出。
- 确保
dialog内第一个子元素是可聚焦的，比如把<button>放最前，而非标题或描述文字 - 如果首元素是纯展示内容（如
<h3>），加tabindex="-1"并在showModal()后立即调用.focus() - 避免在
open属性变化时用 CSStransition延迟显示，会导致焦点时机错乱 - 测试务必用键盘 Tab 导航验证，鼠标点击无法暴露焦点管理缺陷
真正麻烦的从来不是写几行 dialog，而是 Safari 的 backdrop 坐标判断、焦点链断裂、以及那些不报错却让键盘用户卡住的边界情况——这些细节不验证，上线后就会变成无障碍投诉源头。
