dialog.showModal()是唯一能触发模态行为的调用方式，仅设open属性或写标签无效；必须确保DOM就绪、避免CSS干扰、手动处理backdrop样式与点击关闭逻辑。
dialog.showModal() 必须显式调用，open 属性不等于模态激活
写了 <dialog> 却没弹出来？不是 CSS 问题，是根本没“启动”它。原生 dialog 默认不渲染、不占布局、getBoundingClientRect() 返回空值——它连 DOM 绘制都跳过。
仅加 open 属性（如 <dialog open>）能让内容可见，但无 backdrop、不锁焦点、不响应 Esc，只是“浮层”，不是模态框。必须调用 dialog.showModal() 才真正激活模态行为。
- 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null：把<script>放在</body>前，或包裹在DOMContentLoaded里 - 别手动设
dialog.open = true或dialog.style.display = 'block'，这绕过原生焦点管理，Tab 键直接失效 -
show()几乎不用，它不加遮罩、Tab 键可穿透到背景页
确认框逻辑要自己补：close("confirmed") + close 事件监听
原生 dialog 不区分“确认”和“取消”，全靠你传入的字符串决定 returnValue 值。这个值只在 close 事件后才有效，且不是事件对象上的属性。
- 点击“确认”按钮时，必须显式调用
dialog.close("confirmed") - 点击“取消”按钮或按 Esc 时，调用
dialog.close("canceled")（注意：Esc 关闭后dialog.returnValue是""，不是"canceled"） - 监听
close事件后，直接读dialog.returnValue，而不是event.returnValue -
<dialog confirm>、<dialog type="confirm">都无效，浏览器静默忽略
点击遮罩关闭需手动监听，Safari 下尤其不可靠
dialog::backdrop 默认不可点击，也不冒泡事件——规范里就没定义“点背景关窗”，这不是 bug，是设计如此。要实现“点遮罩关闭”，得监听 click 并判断是否点在 backdrop 上。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge 120+ 支持
event.target === dialog判断是否点在 backdrop（注意：不是event.target.tagName === 'DIALOG'） - Safari 目前不暴露 backdrop 元素，
event.composedPath()也拿不到 backdrop 节点，e.target可能始终是body - 稳妥做法：加一个半透明
<div class="backdrop">手动管理，放弃原生::backdrop交互逻辑 - 千万别写成
dialog.addEventListener('click', () => dialog.close())，这会让点击内部按钮也关闭对话框
封装时最易被忽略的三个细节
封装确认框组件时，多数人卡在“能弹出来”，但真正上线后崩溃常发生在 Safari、焦点丢失、表单提交刷新这三处。
- 表单提交必须加
method="dialog"，否则整页 reload；异步提交需e.preventDefault()+ 手动dialog.close() - 首次打开可能不聚焦，Safari 渲染不稳定，需
setTimeout(() => dialog.focus(), 0)强制 - 内部不能只放文字；至少包含一个可交互元素（如
<button>），否则焦点管理会出问题，屏幕阅读器也无法识别
