原生 dialog 的生命周期由 showmodal() 启动：它激活模态栈、添加 backdrop、捕获焦点、响应 esc；仅设 open 属性或 css 显示无效，且必须为 body 直接子元素、禁用 transform/position 干扰，否则焦点逃逸、backdrop 缺失、esc 失效。
dialog 标签本身不管理生命周期，它只是个语义容器；真正的模态行为（遮罩、焦点捕获、Esc 响应）全靠 showModal() 和 close() 方法触发，且必须配合 DOM 位置、事件监听和样式规则才能闭环。
为什么调用 showModal() 才算“启动”生命周期
原生 dialog 默认不渲染、不参与布局、getBoundingClientRect() 返回空值——它不是“隐藏”，是“未激活”。仅加 open 属性或设 display: block 都绕过浏览器模态栈，导致 Tab 键穿透、Esc 失效、backdrop 不出现。
-
showModal()是唯一能激活完整模态链路的方法：自动添加::backdrop、禁用背景交互、聚焦第一个可聚焦子元素、注册 Esc 关闭监听 - 必须在
DOMContentLoaded后执行，否则报Cannot read property 'showModal' of null - 不能放在
window.onload或异步延迟里——用户点击前不应预加载，但脚本必须等 DOM 就绪
关闭逻辑必须手动绑定 click + close 事件双路径
点击 backdrop 不会自动触发 close 事件，这是规范行为，不是 bug。浏览器只把 backdrop 当作视觉层，不赋予交互语义。
- 基础监听：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–16.3 兼容 fallback：当
e.target总是body时，改用坐标判断e.clientX - 必须监听
close事件做清理：dialog.addEventListener('close', () => { console.log(dialog.returnValue); })，dialog.returnValue只在显式调用close('confirm')时有值 - 别写
oncancel="event.preventDefault()"来阻止关闭——它会同时禁掉 Esc 和点击 backdrop，除非你真不需要任何退出方式
DOM 位置与样式是生命周期稳定的硬性前提
dialog 的定位、backdrop 渲染、焦点捕获全部依赖浏览器原生机制，一旦结构或样式违规，整个生命周期就断裂。
- 必须是
body的直接子元素，不能嵌套在transform、position: relative、flex 容器或 Shadow DOM 内 - 不能给
dialog自身设position: absolute或transform，否则 backdrop 错位、Esc 失效 -
dialog::backdrop必须显式声明背景色，否则 Chrome/Safari 无遮罩（Firefox 默认有但颜色不可控） - 确保内部有至少一个可聚焦元素（如
<button></button>），否则showModal()无法锁定焦点，Tab 键仍会逃逸
表单提交不等于对话框关闭，防刷新是关键断点
把 <form></form> 放进 dialog 不会自动关联关闭逻辑。默认提交仍会刷新页面，dialog.close() 根本没机会执行。
- 轻量场景优先用
<form method="dialog"></form>：提交后自动关闭并设dialog.returnValue，不刷新 - 需异步（如
fetch）时，必须在submit事件中event.preventDefault()，再手动dialog.close() - 关闭逻辑必须绑在
form.submit，而非按钮onclick——否则用户按回车提交会漏掉 - 别依赖
dialog.returnValue做状态判断，它在 backdrop 关闭、Esc 关闭、close()无参调用时都是空字符串
真正难的不是写几行 JS，而是理解 dialog 的生命周期完全由浏览器模态栈驱动，任何脱离这个栈的操作（比如手动改 open 属性、用 CSS 强制显示、嵌套在复杂布局里）都会让焦点、backdrop、Esc 这些“原生保障”瞬间失效。细节错一点，用户就卡在弹窗里出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
