var(--x)返回invalid或fallback，根本原因是变量未传至目标元素：继承仅依赖dom祖先链，:root或body声明对shadow dom无效，all:unset会清空变量，大小写/连字符错误、媒体查询被覆盖或忽略、组件库覆盖同名变量等均导致断链。
为什么var(--x)在暗黑模式下返回invalid或 fallback 值
不是变量没定义，而是它根本没传到目标元素上。CSS 变量继承只看 DOM 祖先链，不看 CSS 文件加载顺序或是否用了 @media (prefers-color-scheme: dark)。常见情况包括：
-
:root里写了--bg: #fff，但某个组件库的 CSS 后加载，又覆盖了同名变量（比如ant-design的:root { --bg: #f5f5f5; }），你的var(--bg)就取到了它的值 - 父容器用了
all: unset或all: initial，这会清空所有自定义属性，var(--x)直接跳 fallback - 目标元素在 Shadow DOM 内，而变量挂在
:root或body上——宿主外的祖先不在继承链上，查不到 - 拼写错误，比如
--Bg-Color和var(--bg-color)大小写/连字符不一致，浏览器视作两个变量
:root 声明了暗色值，但页面还是亮色
媒体查询里的 :root 规则被忽略了，或者被后续无条件声明覆盖了。关键不是“有没有写”，而是“谁最后生效”：
- 确保浅色默认值先声明：
:root { --text-color: #1f2937; }，再写@media (prefers-color-scheme: dark) { :root { --text-color: #e5e7eb; } } - 别把
@media块嵌套在其他选择器里（如.theme-wrapper { @media (...) { ... } }），旧版 Safari 会直接跳过 - 检查 DevTools 的 Styles 面板：切换系统暗色模式后，看
:root下对应变量值是否已更新；如果没变，说明媒体查询没匹配，或规则被删除线划掉（优先级不足） - 避免在组件 scoped style 或 JS-injected style 里重定义
--x，容易覆盖全局值且不可控
子元素用了 var(--x) 却没变色
变量确实继承了，但样式没体现出来——问题常出在属性本身不可继承，或被更高优先级规则压制：
-
background-color、border-color、box-shadow这些**不可继承属性**，必须显式写background-color: var(--bg, #fff);，不能指望父元素设了--bg就自动生效 - 原生表单控件（
<input>、<select></select>）默认不响应 CSS 变量，需配合color-scheme: light dark声明，并手动设置color、background等 - SVG 元素的
fill、stroke不继承变量，得单独绑定：<svg><path fill="var(--icon-color, #6b7280)"></path></svg> - 某些框架（如 Vue 的
v-html渲染内容）或content-visibility: hidden区域会中断继承链，需额外验证
Shadow DOM 内 var(--x) 总是 fallback
这是设计使然，不是 bug。Shadow DOM 的变量查找链在宿主元素终止，:root 完全不可见：
- 必须把变量挂到宿主元素自身上：行内
<my-card style="--card-bg: #1e1e1e;"></my-card>、外部 CSS 规则my-card[theme="dark"] { --card-bg: #1e1e1e; }，或 JShost.style.setProperty('--card-bg', '#1e1e1e') -
:host { --card-bg: var(--card-bg); }是唯一安全的转发写法；加 fallback（如var(--card-bg, #fff)）会触发无限递归，Chrome/Firefox 可能卡死 - iOS Safari 16.4 之前存在 WebKit 级 bug：即使变量已正确挂载，
getComputedStyle(host)返回非空，Shadow 内部仍读不到 —— 必须降级用属性判断或 polyfill - 所有
var()调用都必须带 fallback，否则未定义时回退到属性初始值（background-color: initial是 transparent，不是白色）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
