dialog元素默认不渲染、不占布局，必须调用showModal()才激活模态行为；仅设open属性或display无效，且需确保DOM就绪、置于body直接子级、手动处理backdrop点击关闭与焦点管理。
dialog 元素根本没显示？先确认 open 状态或 showModal() 调用
写了 <dialog></dialog> 却完全看不到，不是 CSS 问题，是它压根没“启动”。<dialog> 默认不渲染、不占布局、getBoundingClientRect() 返回空值——浏览器直接跳过绘制。
常见错误包括：
- 只写
<dialog open>：内容可见，但无遮罩、不锁焦点、不响应 Esc，只是个浮层，不是模态框 - JS 中调用了
dialog.show()：同样无 backdrop、Tab 键可穿透到背景页 - 脚本执行早于 DOM 加载：报
Cannot read property 'showModal' of null，需确保dialogEl已存在（把 script 放在</body>前，或用DOMContentLoaded包裹） - 手动设
dialog.open = true或dialog.style.display = 'block'：绕过原生焦点管理，Tab 键失效，且 backdrop 不生成
dialog::backdrop 样式无效？90% 是没调用 showModal()
dialog::backdrop 这个伪元素**只在 showModal() 被调用时才由浏览器生成**；用 show()、open 属性、甚至 HTML 里直接写 <dialog open>，DevTools 里都查不到它，CSS 自然不生效。
必须同时满足两个条件：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- JS 显式调用
dialogEl.showModal() - CSS 选择器严格写成
dialog::backdrop（不能是::backdrop、.modal::backdrop或其他前缀）
可用的样式非常有限：background（推荐 rgba(0,0,0,0.4)）、opacity（慎用，会作用于整个 dialog）、backdrop-filter（如 blur(4px)，需配 background 才稳定）。别碰 z-index、position、margin、transform——它们要么被忽略，要么导致不可预测行为。
点击遮罩不关闭 dialog？这不是 bug，是规范设计
dialog::backdrop 默认 pointer-events: none，点击它不会触发任何事件，更不会自动关闭。浏览器不提供“点背景关窗”的默认逻辑。
正确做法是监听 dialog 元素自身的 click 事件，并判断是否点在 backdrop 区域：
- 基础写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 兼容性差（v17.6 及更早）：
e.target === dialog基本不可靠，需 fallback 到坐标判断，例如检查e.clientX是否落在dialog.getBoundingClientRect()范围外 - 避免在内部按钮上写
event.stopPropagation()，否则 click 无法冒泡上来 - 别给
dialog::backdrop直接绑定事件——它是伪元素，无法添加监听器
dialog 样式错位、居中失败、Safari 不支持？别硬扛，降级更稳
<dialog> 渲染时自带 UA 样式（Chrome 加了 position: absolute、超高 z-index），且部分属性会被强制覆盖：
- 不能用
margin: auto居中，得用margin: 0 auto+ 显式width，或更推荐父容器用 Flex 布局 - 默认带
border: unset，想加边框得重置：border: 1px solid #ccc - Safari（截至 v17.6）仍缺失
dialog::backdrop支持，background: rgba(0,0,0,0.5)可能完全失效 - 父级有
transform、will-change或overflow: hidden，会导致弹窗偏移或被裁剪
真要保兼容，别死磕原生 <dialog>。用 <div role="dialog" aria-modal="true"> + 手动状态管理 + 遮罩层 DOM，反而更可控、更可访问、更少意外。原生 <dialog> 的价值在语义和默认行为（如 Esc 关闭、焦点锁定），而不是样式自由度。
