::backdrop 拿不到父元素的 CSS 自定义属性，因为它是浏览器动态创建的隔离伪元素，不参与主文档继承链，无法继承或访问父元素（如<dialog>）定义的自定义属性，仅支持:root定义的全局变量、UA样式及显式声明。
为什么 ::backdrop 拿不到父元素的 CSS 自定义属性？
::backdrop 是个“隔离层”——它不处于主文档的渲染树中，而是由浏览器在模态上下文（如 <dialog>、fullscreen 元素）中**动态创建的独立伪元素**。它和触发它的元素（比如 <dialog open>）不在同一个继承链上，所以 inherit 失效，var(--color) 也查不到父级定义的变量。
::backdrop 的样式作用域到底在哪？
它的样式只响应三类来源：
- 浏览器默认 UA 样式（例如
background-color: rgba(0,0,0,0.2)） - 显式写在
::backdrop规则里的声明（background: var(--backdrop-bg, #0006)） - 全局
:root下定义的自定义属性（:root { --backdrop-bg: #0006; }）
它**无法访问 <dialog> 或其祖先上的 style 属性、内联 style、或局部 css 块里定义的 --xxx
怎么让 ::backdrop 用上你想传的值？
没有继承，就得手动“透传”。常见做法是把变量提升到 :root，或用 JS 同步设置：
立即学习“前端免费学习笔记（深入）”；
- 把关键变量统一定义在
:root，比如:root { --dialog-backdrop-opacity: 0.75; }，然后dialog::backdrop { background: rgba(0,0,0,var(--dialog-backdrop-opacity)); } - 如果变量是动态的（比如主题色来自用户偏好），用 JS 写入
document.documentElement.style.setProperty('--backdrop-color', color) - 避免在
dialog元素上用style="--x: y"期望::backdrop能读到——它真读不到
Chrome / Safari / Firefox 行为一致吗？
目前所有主流引擎都严格遵循规范：不继承、不穿透、不共享样式上下文。这意味着你不能靠 CSS 选择器“绕过”隔离，比如 dialog[data-theme="dark"]::backdrop 是合法的，但 dialog[data-theme="dark"]::backdrop { background: var(--theme-bg); } 中的 --theme-bg 仍必须来自 :root 或全局作用域，否则 fallback 会生效（或直接无效）。
真正容易被忽略的是：哪怕你在 <dialog> 上写了 style="--theme-bg: #111"，::backdrop 里 var(--theme-bg) 依然解析为 unset —— 不报错，也不警告，就静默失效。
