dialog元素默认不显示，需用showModal()或show()显式打开；关闭须调用close()；点击遮罩层需监听click并判断target；表单提交后应主动close()；Safari 15.4+才支持showModal()，旧版需降级方案。
dialog 元素默认不显示，必须手动调用 showModal() 或 show()
很多人写完 <dialog> 就以为它会自动弹出来，结果页面啥也没发生。这是因为 <dialog> 默认是 display: none，且不会响应 hidden 属性或 CSS 的 visibility 控制。必须用 JavaScript 显式打开：
-
dialog.showModal()：模态弹窗，背景变灰、焦点锁在内部、按 Esc 关闭 -
dialog.show()：非模态（不推荐用于属性选择器，用户容易误点背景） - 关闭只能用
dialog.close()，不能靠remove()或隐藏 DOM
点击遮罩层（backdrop）关闭需监听 click 事件并判断是否为 backdrop
<dialog> 的 backdrop 没有独立 DOM 节点，无法直接绑定事件。但点击 backdrop 时，事件目标是 <dialog> 自身，且 event.target === event.currentTarget，而点击内部元素时不是。因此要这样处理：
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
漏掉这步，用户点背景关不掉，体验断层。注意：不要用 e.target.tagName === 'DIALOG'，因为 IE 不支持，且不够精确。
表单提交后需主动调用 close()，否则 dialog 保持打开状态
商品属性选择器通常带「确认」按钮，点击后应提交选中值并关闭弹窗。常见错误是只发请求、不调 dialog.close()，导致界面卡住：
立即学习“前端免费学习笔记（深入）”；
- 用
<form method="dialog">可以让 submit 自动 close，但仅适用于简单场景（无异步校验、无 loading 状态） - 更稳妥的做法是禁用默认提交：
event.preventDefault()，执行业务逻辑（如收集input[type=radio]值），再调dialog.close() - 关闭前建议清空临时状态（比如已选中的
checked），避免下次打开残留
兼容性差，Safari 15.4+ 才支持 showModal()，旧版需降级方案
如果你的用户包含大量 iOS 15.3 或 macOS Monterey 早期用户，dialog.showModal() 会静默失败（无报错，但不显示）。必须检测支持性：
if (typeof dialog.showModal === 'function') {
dialog.showModal();
} else {
// 回退到 position: fixed + z-index 的 div 模拟
dialog.classList.add('fallback-dialog');
document.body.classList.add('dialog-open');
}
别指望 polyfill 完全还原行为——focus trapping、Esc 键处理、backdrop 样式都需要手写。真正上线前，务必在真机 Safari 上验证点击、键盘导航、关闭流程是否连贯。
