dialog标签默认不渲染、不占布局，必须调用showmodal()才能激活完整模态行为；仅设open属性仅实现初始可见，无遮罩、不锁焦点、不响应esc。
dialog 标签不是“写了就弹”，它默认不渲染、不占布局、getBoundingClientRect() 返回空对象——你得手动“通电”它，否则它只是 HTML 文本里的一个标签。
open 属性只控制显隐，不触发模态行为
open 是布尔属性，写成 <dialog open></dialog>、<dialog open=""></dialog> 或 <dialog open="open"></dialog> 效果一致。但它仅让内容可见，不加遮罩、不锁焦点、不响应 Esc，本质是“静态浮层”。
- 别用
dialog.open = true或dialog.setAttribute('open', '')动态控制——这绕过原生焦点管理，Tab 会穿透到背景页 - 首次显示必须调用
showModal()，而不是依赖open属性 -
open在 SSR 或服务端渲染中可能被误判为“已激活”，但客户端 JS 未执行前，它仍不会真正模态化
showModal() 与 show() 的关键区别
showModal() 是唯一能启用完整模态语义的方法：自动居中、禁用背景交互、聚焦第一个 autofocus 元素、响应 Esc、生成可样式化的 ::backdrop；而 show() 只是普通浮层，几乎不用。
-
showModal()要求元素已挂载在直接子级，否则抛错或定位异常 -
show()不生成::backdrop，所以监听点击遮罩的逻辑对它无效 - 两者都要求 DOM 已加载：脚本放在
前，或包裹在DOMContentLoaded中，否则document.getElementById('myDialog')为null
close() 方法和 returnValue 的实际用法
dialog.close() 接收一个可选参数（如 'confirmed' 或 'cancelled'），该值会赋给 dialog.returnValue，并在 close 事件中可用。这不是装饰性字段，而是表单提交后获取结果的核心机制。
- 用
method="dialog"的<form></form>提交时，dialog.returnValue自动设为提交按钮的value属性值 - 异步提交（如
fetch）后需手动调用dialog.close(result)，否则returnValue为空字符串 -
close()触发close事件，但不触发cancel事件；按 Esc 或点击 backdrop 会同时触发cancel和close - 关闭后记得重置表单状态（如清空
<input>），否则下次打开仍是上次脏数据
点击 backdrop 关闭的兼容性陷阱
::backdrop 默认不可点击、不冒泡、无事件绑定——规范里就没定义“点背景关窗”，这不是 bug，是设计如此。Safari 15.4–16.3 更麻烦：e.target 常为 body 而非 dialog。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 旧版 fallback：用
e.clientX 或 <code>event.composedPath().includes(dialog) === false - 绝对不要写
dialog.addEventListener('click', () => dialog.close())——这会让所有内部点击都关闭对话框 - 别指望 CSS
pointer-events: none或z-index调整能绕过这个限制，原生行为必须靠 JS 判断
最常被忽略的点：dialog 必须在 直接子级，不能套在 <div class="app"> 或 Vue/React 根容器里；否则 <code>showModal() 在 Safari 中可能定位偏移、焦点丢失，甚至静默失败。
