<dialog> 默认不渲染，需调用 showModal() 才激活完整模态行为；仅设 open 属性或调用 show() 无法获得遮罩、焦点锁定和 Esc 响应，且必须作为 body 直接子元素并显式定义 dialog::backdrop 样式。
dialog 标签本身不实现模态对话框，必须调用 showModal() 才能激活完整模态行为；仅写标签、设 open 属性或用 show() 都无法获得遮罩、焦点锁定和 Esc 响应。
为什么写了 <dialog> 却完全看不到？
浏览器对 <dialog> 的处理是惰性的：默认 display: none、跳过布局与绘制，getBoundingClientRect() 返回空值。它不是“隐藏”，而是“未激活”。
- 加
open属性（如<dialog open>）只让元素可见，但无遮罩、无焦点捕获、Esc 无效 -
dialog.show()仅显示，不加::backdrop、不禁用背景交互、Tab 键可穿透 -
dialog.showModal()是唯一能触发完整模态链路的方法：自动加::backdrop、禁用背景 Tab/点击、聚焦第一个可聚焦子元素、响应 Esc - 脚本必须在
DOMContentLoaded后执行，否则报Cannot read property 'showModal' of null
点击遮罩层（backdrop）为什么不关闭？
这不是 bug，是规范明确行为：::backdrop 是渲染层，没有 DOM 节点，也不冒泡事件到 dialog 元素。点击它不会自动触发 close()。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容问题：点击 backdrop 时
e.target常为body，需 fallback 到坐标判断，例如e.clientX < dialog.getBoundingClientRect().left - 别给
dialog设pointer-events: none，这会让原生焦点锁定彻底失效 - 不要在
body或外部容器监听 click 关闭，否则无法区分点击的是 backdrop 还是其他区域
焦点管理失效的常见原因与修复
showModal() 会尝试聚焦第一个可聚焦子元素（如 <button>、<input>），但失败时静默，焦点留在背景页。
立即学习“前端免费学习笔记（深入）”；
- 确保
dialog内第一个子元素可聚焦：优先用<button>或<input>；若必须是文字，加tabindex="0"并在showModal()后手动.focus() - 避免首元素被
disabled、hidden或tabindex="-1"禁用 - 测试时务必用键盘 Tab 切换，不能只靠鼠标点
- 别在
open属性变化时用 CSS 动画延迟显示，会干扰焦点时机
样式与 DOM 结构的硬性前提
dialog 的定位、::backdrop 渲染、焦点捕获全部依赖浏览器原生机制，结构或样式违规即导致生命周期断裂。
- 必须是
body的直接子元素，不能嵌套在transform、position: relative、flex容器或 Shadow DOM 内 - 不能给
dialog自身设position: absolute或transform，否则::backdrop错位、Esc 失效 -
dialog::backdrop必须显式声明背景色（如background: rgba(0,0,0,0.5)），否则 Chrome/Safari 无遮罩（Firefox 默认有但颜色不可控） - 表单提交要防刷新：在
<form>上加method="dialog"属性，提交后自动关闭且设dialog.returnValue；异步场景需e.preventDefault()+ 手动dialog.close()
最容易被忽略的是 DOM 位置和 ::backdrop 的显式样式——哪怕 showModal() 调用成功，只要 dialog 不在 body 下或没写 dialog::backdrop，遮罩就不存在，整个模态体验就崩了。
