var(--x)显示invalid或fallback值，说明变量在继承链中未被找到，即祖先节点无有效声明；常见原因包括:root未定义、display:none切断继承、拼写错误、js注入过晚、unset/initial主动断链、作用域隔离（如shadow dom）及构建工具配置不当。
var(--x) 显示 invalid 或 fallback 值，说明变量根本没被找到
这不是语法错误，而是浏览器沿祖先链查找 --x 时断链了。它只认最近一个**有效声明**，查不到就回退或丢弃整条 CSS 规则。常见断点包括：
-
:root没定义--x，但子组件直接写了color: var(--x) - 父元素用了
display: none—— 子树不参与样式计算，继承链物理消失 - 拼写或大小写不一致：
--text-color≠--text-colour，--Color≠--color - JS 动态注入变量（如
document.documentElement.style.setProperty('--x', 'red')）晚于样式解析，变量“还没定义就被用了” - 父元素设了
--x: unset或--x: initial，主动切断继承
父组件声明的 --x 在子组件里读不到，不是因为“没传”，而是作用域不重叠
CSS 自定义属性靠继承传播，不是全局注册。你在父组件里写 .card { --gap: 16px; }，这个 --gap 只对 .card 及其子元素生效；如果子组件是独立 Shadow DOM、或用 <style scoped></style> / module.css 封装的，它的根节点不继承父组件的声明。
- Vue/React 中，
<style scoped></style>或Card.module.css内声明的--x，仅限该组件 DOM 树内生效 - Shadow DOM（如 NiceGUI、Web Components）默认隔离外部
:root变量，需显式在影子根上设置：shadowRoot.host.style.setProperty('--x', 'val')或在<style></style>中重复声明 -
::v-deep或/deep/只穿透选择器作用域，不穿透变量继承链 —— 它能让父组件样式匹配子组件 DOM，但不会把父组件的--x注入到子组件的继承链里
为什么子组件用了 var(--x) 却拿到回退值，而不是父组件定义的值？
关键看 var(--x, #000) 的默认值何时起效：它只在 --x **完全未定义**（即祖先链中无任何有效声明）时触发，不是“继承失败”时才用。
- 如果父组件定义了
--x: red，子组件写var(--x, #000)，结果仍是red，#000不会生效 - 如果中间某层写了
--x: unset，子组件调用var(--x, #000)，此时#000才会被采用 -
initial和unset对自定义属性在此场景下效果一致：都让变量“无值”，触发 fallback - 别用
inherit操作自定义属性 —— 它对原生属性有效，对--x无效
想让子组件稳定读到变量，唯一可靠路径是 :root
:root 是唯一能确保所有元素（包括动态插入的第三方组件、Shadow DOM 子树）都能继承的位置。其他位置（如 html、.app、组件级 class）都有覆盖盲区或框架干扰风险。
-
html也可用，但权重略低；某些框架（如 NiceGUI）会重置html样式，导致变量丢失 - 构建工具（如 PostCSS）若未配置
postcss-custom-properties的preserve: false，IE11 等旧浏览器会跳过含var(--x)的整条规则 —— 它永远看不到编译后的值 - 动态 JS 设置（
el.style.setProperty('--x', 'red')）在 IE 中需配合css-vars-ponyfill且watch: false才可用 - 变量值必须是纯常量（
--c: red;），不能含calc()、嵌套var()或函数（如linear-gradient），否则插件无法静态求值
var() 计算后的结果。比如父元素 --size: 2em，子元素 font-size: var(--size)，这个 2em 始终相对于父元素的 font-size 计算，而不是子元素自己的。这种动态绑定既是优势，也是调试时绕晕人的地方。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
