dialog 元素默认隐藏，需显式设置 open 属性才能显示；常见错误是仅写 <dialog> 标签而未添加 open 属性。
dialog 元素不显示？检查 open 属性是否正确设置
原生 <dialog> 默认是隐藏的，即使写在 HTML 里也不会自动出现。它不像 alert() 那样“自带弹出逻辑”，必须显式设置 open 属性（布尔属性）才能渲染为可见模态框。
常见错误：只写了 <dialog>...，没加 open；或用 JS 设置 dialog.open = false 后忘记恢复；或误用 dialog.setAttribute('open', 'false') —— 这会把 open 当成字符串属性，浏览器仍视为存在，模态框依然显示。
- 正确初始化：直接写
<dialog open>... - JS 控制显示：
dialog.showModal()（推荐，带模态拦截）或dialog.show()（非模态，不阻止背景交互） - JS 控制关闭：
dialog.close()，这会移除open属性，不是设为false - 不要用
dialog.removeAttribute('open')手动删——close()已包含该行为且更安全
点击遮罩层或按 Esc 不关闭？监听 close 事件并确认触发源
<dialog> 默认支持点击 backdrop（灰色遮罩）和按 Esc 关闭，但前提是它由 showModal() 打开。若用 show()，则无 backdrop、也不响应 Esc。
另一个常见问题：自定义按钮调用 dialog.close('confirmed') 传参后，close 事件的 event.returnValue 是 'confirmed'，但开发者常忽略监听该事件来清理状态或提交数据。
立即学习“前端免费学习笔记（深入）”；
- 必须监听：
dialog.addEventListener('close', () => { /* 清理或响应 */ }) - 不要只依赖
click监听遮罩 —— backdrop 没有独立 DOM 节点，无法直接绑定 - 如果页面有多个
<dialog>，注意每个都要单独绑定close事件，不能共用一个 handler 除非你明确区分了event.target
样式不生效或布局错乱？重置 dialog 自带的 display 和 position
浏览器对 <dialog> 应用了强默认样式：display: none（未 open 时）、position: absolute、居中定位逻辑、以及 backdrop 的伪元素 ::backdrop。这些容易和 CSS 框架（如 Tailwind、Bootstrap）冲突。
- 要覆盖居中行为，可改
dialog { margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); }，但需配合position: fixed才稳定 - 必须手动设置
dialog::backdrop { background: rgba(0,0,0,0.5); }，否则 backdrop 透明不可见 - Firefox 目前仍需
-moz-appearance: none来解除某些平台默认边框 - 避免对
<dialog>设width: 100%或max-width: 100vw—— 它的宽度计算受contain: layout影响，可能意外截断内容
兼容性不足怎么办？检测支持并提供降级方案
Chrome 97+、Edge 97+、Firefox 99+ 原生支持 <dialog>；Safari 15.4+ 支持但有 backdrop 渲染 bug（iOS Safari 15.6 修复）。IE 完全不支持，旧版 Android WebView 也基本不可用。
不能只靠 if ('showModal' in HTMLDialogElement.prototype) 判断 —— Safari 15.4 虽有该方法，但 close 事件不触发，实际不可靠。
- 稳妥检测：
const supportsDialog = typeof HTMLDialogElement === 'function' && 'showModal' in HTMLDialogElement.prototype && window.CSS && CSS.supports('backdrop-filter', 'blur(1px)')（后者辅助判断 backdrop 可用性） - 降级建议：用
<div role="dialog" aria-modal="true">+ 手动管理焦点、aria-hidden切换、inert属性（或 polyfill）封锁背景 - 不要在不支持的环境里“模拟 open 属性” —— 会导致语义缺失和屏幕阅读器误读
真正难的不是写出能弹出来的 dialog，而是让它的关闭路径、焦点管理、语义暴露和样式边界，在所有目标环境下都一致。尤其当它嵌套在 Shadow DOM 或被 Web Component 封装时，showModal() 可能静默失败 —— 这时候得查 document.activeElement 和控制台警告。
