dialog::backdrop 必须显式设置 background 才可见，仅设 opacity 无效；应使用 fixed 定位四边拉伸而非 100vw/vh；点击关闭需监听 dialog 元素自身事件；多层 dialog 的 backdrop 无法独立样式控制；且仅 showmodal() 触发 backdrop 渲染。
dialog::backdrop 必须显式设置 background 才可见
调用 showModal() 后，浏览器会自动插入一个不可见的遮罩层，但它没有默认背景色 —— 这不是 bug，是规范要求。只写 dialog::backdrop { opacity: 0.5; } 不起作用，因为透明黑（rgba(0,0,0,0)）和完全透明没区别。
必须同时指定：background-color 或 background 值，且不能是 transparent 或未声明。
-
dialog::backdrop { background: rgba(0,0,0,0.6); }✅ 安全有效 -
dialog::backdrop { background: #0008; }✅ 支持 CSS 颜色新语法（2026 年主流浏览器已稳定支持） -
dialog::backdrop { background: linear-gradient(45deg, #000, transparent); }✅ 可做渐变遮罩 -
dialog::backdrop { opacity: 0.6; }❌ 无效，无 background 基底
dialog::backdrop 的定位和尺寸不能依赖 100vw/100vh
虽然 ::backdrop 天然覆盖视口，但用 width: 100vw; height: 100vh; 在 iOS Safari 横屏切换时可能错位或漏边。官方推荐写法是：固定四边拉伸，不依赖视口单位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确写法：
dialog::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } - ❌ 避免：
width: 100vw; height: 100vh;（尤其在 Safari 15.4–16.x 中有已知渲染抖动） - ⚠️ 注意：不要给
dialog::backdrop设z-index—— 它的层叠顺序由浏览器控制，设了反而可能被忽略
点击 backdrop 关闭 dialog 需手动监听，且不能用 event.stopPropagation()
原生 dialog 的 ::backdrop 默认不响应点击事件，也不关闭弹窗。想实现“点击遮罩关闭”，得自己加逻辑，但容易踩坑。
- ✅ 正确监听：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - ❌ 错误做法：给
dialog::backdrop绑 click —— 伪元素无法被 JS 直接绑定事件 - ❌ 避免
e.stopPropagation()：它会阻止 focus 管理和 ESC 行为，导致可访问性退化 - ⚠️ 额外注意：Safari 15.4+ 才支持
showModal()，旧版 fallback 时需同步处理 backdrop 点击逻辑
多层 dialog 叠加时 backdrop 样式不会自动分层
连续调用多个 showModal() 会形成栈式弹窗，但所有 ::backdrop 共享同一层 DOM 抽象 —— 你无法单独控制第 2 个 dialog 的 backdrop 颜色或透明度。
- ✅ 可行方案：用 CSS 变量动态注入样式，例如
dialog:nth-of-type(2)::backdrop { background: rgba(255, 100, 0, 0.4); }（仅 Chrome/Firefox 支持，Safari 不识别 nth-of-type 对 backdrop） - ❌ 无法做到：为每个 dialog 设置独立 backdrop 动画或滤镜，因为
::backdrop不是真实元素，无法用 JS 查询或 class 控制 - ⚠️ 真实限制：如果你需要精细控制每层遮罩，说明业务已超出原生
dialog能力边界，该考虑降级为div + inert方案
最常被忽略的一点：dialog::backdrop 的样式生效前提是 dialog 必须通过 showModal() 打开；用 show() 或 open 属性时，::backdrop 根本不生成，CSS 规则完全不匹配。别在调试时反复检查 backdrop 样式却忘了确认调用方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
