dialog标签默认不显示，必须调用showModal()才激活模态行为；仅设open属性或写HTML结构无效，且需手动添加dialog::backdrop样式、确保DOM加载完成、处理焦点管理与Safari兼容性问题。
dialog 标签本身不会显示任何东西，必须调用 showModal() 才能真正弹出来——写完 HTML 就以为能用，是上线前最常被忽略的致命错误。
为什么写了
因为 dialog 是惰性元素：解析后默认隐藏（open 属性不存在），不渲染 backdrop，也不拦截焦点。它不像 div 那样靠 CSS 控制显隐，而是纯 JS 驱动。
- 只写标签不调方法 → 页面上什么都没有，控制台也无报错
-
等价于show()，不是模态，没遮罩、不锁焦点、Esc 无效 - 脚本执行早于 DOM 加载 →
document.querySelector('dialog')返回null，调showModal()报错Cannot read property 'showModal' of null - 父容器有
transform或overflow: hidden→ Safari 中 backdrop 被裁剪或弹窗错位
怎样正确调用 showModal() 并保证遮罩可见
调用方法只是第一步；dialog::backdrop 必须手动加样式，否则 backdrop 是透明不可见的——尤其在 Firefox 中，它压根不渲染 backdrop，仅靠逻辑阻塞背景。
- 确保
dialog是的直接子元素（避免被父级transform截断 backdrop） - 必须写 CSS：
dialog::backdrop { background-color: rgba(0, 0, 0, 0.6); }，否则 Chrome/Edge 可能灰得极淡，Safari 17.4+ 才支持动画 - 不要依赖
display: none控制显隐 ——dialog的隐藏由open属性和 JS 方法管理，设style.display = 'none'会破坏焦点流 - 打开后立即聚焦首个可交互元素：
dialog.querySelector('button, input, [href]')?.focus()，否则键盘用户卡在空白处
点击遮罩关闭弹窗，为什么经常失效
原生 dialog 的 backdrop 不是真实 DOM 节点，点击行为是否触发、e.target 是否等于 dialog，浏览器实现差异极大：Chrome/Edge 120+ 可靠，Safari 15.4–17.6 基本不可靠，Firefox 不触发任何 backdrop 相关事件。
- 安全写法（仅对 Chrome/Edge 有效）：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 必须降级：监听
keydown捕获 Esc，再配合坐标判断（e.clientX ）或手动插入- 别用
dialog.onclick = dialog.close—— 它无法区分点击目标，一点内容就关了- 禁用 backdrop 关闭？不要
preventDefault()，而是移除 click 监听器；否则会同时破坏 Esc 和屏幕阅读器逻辑兼容旧浏览器时，降级逻辑不能只靠
if ('showModal' in HTMLDialogElement.prototype)检测通过只是开始；真正的坑在语义、焦点、可访问性三方面补全。Polyfill 或 div 方案若只处理显隐，会在辅助技术路径中彻底失焦。
- 检测失败时，设
dialog.hidden = true（比style.display = 'none'更语义正确） - 手动加
aria-modal="true"和role="dialog"，并确保弹窗内首个可聚焦元素获得焦点 - 关闭后，必须把焦点交还给触发按钮：
triggerBtn.focus()，否则屏幕阅读器丢失上下文 - 别给
dialog外层套pointer-events: none—— 这会让整个弹窗无法聚焦、键盘不可导航
真正难的不是那一行
dialog.showModal()，而是 backdrop 在 Safari 中不可见、returnValue在 Safari 中始终为空、焦点在关闭后回不到原处——这三件事都不报错，但会让键盘用户和屏幕阅读器用户直接卡死。 - 别用
