dialog 元素默认隐藏，必须设置 open 属性或调用 show()/showmodal() 才可见；点击 backdrop 不自动关闭，需手动监听 click 判断；css 受限，backdrop 样式需用 ::backdrop，safari 不支持；复杂场景建议用 div 替代。
dialog 元素不显示？先检查 open 属性
HTML <dialog></dialog> 默认是隐藏的，哪怕写进 DOM 里也完全不可见——它不像 <div> 那样“默认渲染”。必须显式设置 <code>open 属性，或者用 JavaScript 调用 show() / showModal() 才能出现。
- 直接写
<dialog open>内容</dialog>是最简单的初始显示方式 - 仅靠 CSS 设置
display: block或visibility: visible无效，<dialog></dialog>的可见性由open控制 - 没加
open却调用close()会抛错：Failed to execute 'close' on 'HTMLDialogElement': The element does not have an 'open' attribute -
show()不阻塞页面交互（可点背景、可切 tab），showModal()才真正锁屏、聚焦、拦截外部点击
点击遮罩层关闭 dialog？别依赖默认行为
原生 <dialog></dialog> 在 showModal() 模式下，点击背景遮罩（backdrop）**不会自动关闭弹窗**——这是很多人误以为“没生效”的主因。它只拦截点击，不响应关闭逻辑。
- 必须手动监听
click事件，判断是否点在 backdrop 上：event.target === dialog（因为 backdrop 是 dialog 的 pseudo-element，但事件目标就是 dialog 元素本身） - 更稳妥的做法是监听
click后检查event.clientX和dialog.getBoundingClientRect()，避免误判内部元素 - 按
Esc键默认会触发close事件，无需额外监听 - 不要给 dialog 内部按钮写
onclick="this.closest('dialog').close()"，IE 不支持closest，且现代写法应统一用dialog.close()
样式不生效？dialog 的 CSS 有特殊限制
<dialog></dialog> 渲染时自带 UA 样式（比如 Chrome 加了 position: absolute、z-index: 2147483647），而且部分 CSS 属性会被强制覆盖或忽略。
- 不能用
margin: auto居中，得用margin: 0 auto+ 显式width，或更推荐 Flex 布局父容器 -
backdrop的样式只能通过::backdrop伪元素控制，且仅支持有限属性（background,opacity等），不支持transform或border - dialog 默认带
border: unset，想加边框得重置：border: 1px solid #ccc - Safari 目前（v17+）仍不支持
::backdrop，需用 JS 模拟遮罩层作为降级方案
兼容性差怎么办？别硬上，先看真实需求
截至 2024 年中，<dialog></dialog> 在 Safari 上仍缺失 ::backdrop 支持，且所有浏览器都不支持嵌套 showModal()（第二个 modal 会退化为 show()）。真要稳定交付，得权衡。
立即学习“前端免费学习笔记（深入）”；
- 纯提示类弹窗（如“保存成功”）、单次操作确认，用
<dialog></dialog>完全够用，语义清晰、键盘无障碍友好 - 需要复杂表单、拖拽、多层弹窗、动画入场的场景，CSS +
<div> 仍是更可控的选择 <li>如果必须用 dialog 又要兼容 Safari，可以用 <code>dialog.showModal()+ 外层<div class="backdrop"> 手动控制显隐，但要注意 focus 管理和 Esc 事件穿透 <li>服务端渲染（SSR）中提前写死 <code>open属性，可能造成首屏闪动，建议初始不带open，JS 初始化后才 show
dialog 的坑不在语法，而在它把“模态交互”这个复杂问题抽象得太干净——结果你得自己补全焦点管理、键盘导航、屏幕阅读器标签、Safari 降级这些细节。越想省事，越容易漏掉其中一环。
