必须用 showModal() 触发模态行为，监听 close 事件手动调用 close()，并为 Safari 补全 dialog::backdrop 样式；否则遮罩无效、焦点失控、Esc/点击无响应。
dialog 标签不是“开箱即用”的弹窗，它必须配合 showModal() 才能获得真正可用的模态行为——直接写 open 属性或只调用 show()，基本等于没用。
showModal() 是唯一能触发完整模态逻辑的方法
showModal() 会做四件事：加灰色遮罩（::backdrop）、禁用背景交互、把焦点移到对话框内第一个可聚焦元素、响应 Esc 键和点击遮罩自动触发 close 事件。
- 不要用
show()：它不加遮罩、不锁背景、不管理焦点，用户能照常点按钮、输文字、切 tab，实际场景中几乎无意义 - 不要只写
<dialog open>：这只会让元素可见，但没模态特性，::backdrop不渲染，Esc 无效，点击遮罩也不关闭 - 必须确保
dialog是<body>的直接子元素，否则 Safari 和部分 Chrome 版本下::backdrop渲染失败
<body>
<dialog id="myDialog">
<p>确定要删除吗？</p>
<button id="confirm">确定</button>
<button id="cancel">取消</button>
</dialog>
<button id="openBtn">打开</button>
</body>
然后 JS 中：
document.getElementById('openBtn').onclick = () => document.getElementById('myDialog').showModal();
点击遮罩或按 Esc 后，close() 不自动隐藏，得手动监听
showModal() 触发后，用户点遮罩或按 Esc，浏览器会派发 close 事件，但 dialog 元素仍保持 open 状态——它只是“被请求关闭”，你得自己调 close() 或重置状态。
- 监听
close事件做清理（如重置表单、释放资源） - 监听
cancel事件可区分 Esc/遮罩关闭（close是最终结果，cancel是触发原因） - 不监听的话，用户以为关了，其实
dialog.open还是true，后续再调showModal()会报错：“The element is already open”
const dialog = document.getElementById('myDialog');
dialog.addEventListener('close', () => { console.log('已关闭，但 open 属性仍为 true'); });
dialog.addEventListener('cancel', (e) => { e.preventDefault(); // 阻止默认关闭行为（极少需要） });
::backdrop 样式在旧版 Safari 必须手动补全
Safari 15.4 之前不支持 dialog::backdrop 伪元素，导致点击遮罩无效、无灰层、无过渡动画。
- 加这段 CSS 能兜底：
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } - 更稳妥的做法是：检测
CSS.supports('selector(dialog::backdrop)')，不支持时用 JS 动态插入一个<div class="backdrop">并绑定事件 - 不补样式 → 用户看不到遮罩 → 点击无反馈 → 以为弹窗卡死
关键点就三个：必须用 showModal()、必须监听 close 并接受它不自动隐藏的事实、::backdrop 在 Safari 里不是“有”而是“得你给”。其他所有封装库的 Dialog 组件，底层绕不开这三件事。
