根本原因在于::backdrop仅在dialog.showModal()调用后生成，其他方式如show()、open属性或CSS显隐均无效；它必须是body直系子节点且浏览器支持有限，Safari和Chrome部分支持，Firefox完全不支持。
根本原因不是选择器写错了，而是浏览器压根没生成 ::backdrop 这个伪元素——它只在 dialog.showModal() 被调用后才存在，其他任何方式都不会触发。
dialog 没调用 showModal() 就肯定没 backdrop
这是 90% 的失效根源。以下情况全部无效：
-
dialog.show()—— 只显示但不激活模态层 -
<dialog open></dialog>或dialog.open = true—— 不创建 backdrop 节点 - 用
display: block/visibility: visible模拟弹窗 —— 完全绕过原生机制
调试时打开 DevTools，在 Elements 面板里搜 ::backdrop，如果找不到，说明 JS 根本没执行 showModal()；找到但没样式，再查浏览器支持或 CSS 写法。
dialog 结构或父容器破坏了 backdrop 渲染
::backdrop 是浏览器合成层绘制的固定覆盖层，对 DOM 位置和祖先样式极其敏感：
立即学习“前端免费学习笔记（深入）”；
-
<dialog></dialog>必须是的直接子节点（或至少未被transform、filter、will-change、overflow: hidden包裹） - 被 Vue/React 组件条件渲染但尚未挂载到 DOM 时调用
showModal()→ 静默失败 - 嵌套在 Ant Design、Element Plus 等 UI 库封装的容器里 → backdrop 被裁剪或消失
最简验证法：把 <dialog></dialog> 剪切出来，直接插到 底部，再试 showModal()。
浏览器根本不支持，或只支持部分样式
截至 2026 年 10 月，支持现状仍是碎片化的：
- Safari 15.4+ 支持
background-color，但backdrop-filter在 16.4+ 才实验性启用，且不稳定 - Firefox 至今（2026 年 5 月）**完全不支持**
::backdrop的任何样式，包括background-color - Chrome/Edge 支持最全，但
backdrop-filter在某些版本中需配合will-change: transform才生效
安全检测必须写成：@supports selector(::backdrop) and (background-color: #0008)，不能只靠 @supports selector(::backdrop)。
写了无效样式，浏览器直接忽略
::backdrop 是合成层伪元素，不响应常规盒模型控制。以下写法一律被忽略，且不会报错：
-
width/height/top/left—— 它始终铺满视口 -
z-index—— 设了也无效，层级由浏览器固定（在页面内容之上、<dialog></dialog>之下） -
pointer-events—— 默认为none，不能改成auto来拦截点击 -
background-image或linear-gradient()—— Safari 中常回退为纯黑，不可靠
唯一稳妥的颜色控制方式是：background-color: rgba(0,0,0,0.5) 或简写 #0008；想加模糊，优先用 -webkit-backdrop-filter: blur(4px)，并接受 Firefox 用户看到纯色 fallback。
真正难处理的不是“怎么让它生效”，而是“它生效后行为不可控”——比如盖不住 position: fixed 导航栏、动画卡顿、低端机滤镜掉帧。这些不是配置问题，是规范限制本身决定的边界。别把它当通用遮罩层用，该手动插入 <div class="backdrop"> 的时候，就老老实实 JS 控制显隐。</div>
