dialog 的生命周期由 showModal() 启动，仅设 open 属性或 CSS 显示无法触发遮罩、焦点锁定、Esc 响应等模态行为；必须为 body 直接子元素，禁用 position/transform，显式设置 backdrop 背景色，并监听 close 事件处理 returnValue 与状态清理。
dialog 的生命周期由 showModal() 启动，不是 open 属性
原生 dialog 元素默认不参与渲染、不占布局空间、getBoundingClientRect() 返回空值——它不是“隐藏”，是“未激活”。仅设置 open 属性（如 <dialog open>）或用 CSS 强制显示（display: block），只会让内容可见，但无遮罩、无焦点锁定、Esc 不响应、Tab 键可穿透背景页。
真正启动完整模态生命周期的唯一方式是调用 showModal()。它会：
- 将
dialog推入浏览器原生模态栈 - 自动插入
::backdrop并启用视觉隔离 - 聚焦第一个可聚焦子元素（如
<button>） - 注册 Esc 键监听并绑定关闭逻辑
- 禁用背景滚动与交互
⚠️ 常见错误：在 DOM 加载前调用 showModal()，报错 Cannot read property 'showModal' of null；或把 script 放在 <head> 里却没加 DOMContentLoaded 包裹。
close 事件必须手动监听，且 returnValue 有使用前提
dialog.close() 是唯一标准关闭方式，但它只触发 close 事件，不会自动移除 open 属性（该属性会变为 false），也不会清理状态。你得靠监听 close 做后续动作：
立即学习“前端免费学习笔记（深入）”；
- 读取
dialog.returnValue—— 这个值**只在显式调用close('confirm')或表单提交时才有**，比如<button value="confirm">确定</button>配合<form method="dialog"> - 重置表单字段、清空输入框、恢复按钮文字，否则下次打开仍是脏数据
- 释放资源（如取消 pending
fetch请求、清除定时器）
别写 oncancel="event.preventDefault()" 来阻止关闭——它会同时禁掉 Esc 和点击 backdrop，除非你真不需要任何退出路径。
点击 backdrop 关闭需手写判断，Safari 必须 fallback 坐标检测
规范明确：点击 ::backdrop 默认不触发任何行为，也不冒泡事件。这不是 bug，是设计。要实现“点背景关闭”，必须监听 dialog 自身的 click 事件，并判断点击目标是否为 dialog 元素本身：
- 标准写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容缺陷：点击 backdrop 时
e.target常返回body而非dialog，需 fallback 判断坐标，例如e.clientX <= 20 && e.clientY <= 20（粗略判定点在边缘）或结合dialog.hasAttribute('open')+e.composedPath().includes(dialog) - 绝对不要写
dialog.addEventListener('click', () => dialog.close())——这会让点击内部按钮也关闭对话框
⚠️ show() 模式下没有 ::backdrop，这段监听无效；仅 showModal() 生效。
DOM 位置和样式是生命周期稳定的硬性前提
dialog 的 backdrop 渲染、焦点捕获、居中定位全部依赖浏览器原生机制，一旦结构或样式违规，整个生命周期就断裂：
- 必须是
<body>的直接子元素；嵌套在<main>、<div style="position: relative">、<form>或 Shadow DOM 内都会导致 backdrop 缺失（尤其 Safari） - 不能给
dialog自身设position: absolute、transform、will-change，否则 backdrop 错位、Esc 失效、首次打开不聚焦 -
dialog::backdrop必须显式声明背景色，Chrome/Safari 默认透明，Firefox 虽有但颜色不可控；建议统一写background-color: rgba(0,0,0,0.5) - 确保内部至少有一个可聚焦元素（如
<button>），否则showModal()无法锁定焦点，用户 Tab 键会逃逸到背景
最易被忽略的是：框架（React/Vue）中若用 createPortal 或组件封装，必须确保挂载点为 document.body，而不是组件内某个 wrapper div —— 否则 Safari 下可能完全不渲染。
