子组件没重绘是因为变量未被实际引用；浏览器仅在样式计算阶段读取var()，若元素规则中未写color: var(--color)等绑定，则变量变更无效，需确保所有目标样式显式引用且作用域正确。
变量更新后子组件没重绘，是因为没被实际引用
改了 --color 但某个按钮颜色不变，不是变量没设成功，而是它的 CSS 规则里压根没写 color: var(--color)。浏览器只在样式计算阶段读取变量值，如果某元素的任何有效声明都没用到这个 var()，那变量变多少次都跟它无关。
常见漏引场景：
- 第三方组件（如
ant-button）内部用的是--ant-primary-color，你改--primary-color它根本看不到 - 子组件是 Shadow DOM，宿主元素没显式设置
style.setProperty('--x', ...)，变量不会自动透传 - 写了
.btn { background: #007bff; }这种硬编码，完全绕过变量控制链 - 变量定义在
.card__header上，但.card__footer没继承——因为选择器没命中容器级作用域
嵌套结构中变量不生效，关键看“谁声明、谁继承”
CSS 变量靠选择器声明位置决定作用域，不是靠 DOM 层级自动穿透。你在父 <div class="parent"> 的 CSS 规则里写 .parent { --text-color: red; }，只有该元素及其后代能继承；但如果子组件是自定义标签 <my-card>，它内部 Shadow DOM 的根节点不认这个 .parent 声明。
验证方法：打开 DevTools → Elements → 选中目标元素 → Computed 面板搜索变量名，点开箭头看 “Defined in” 路径。如果显示 inherited from <html>，说明中间没有任何容器覆盖它。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 把变量声明在包裹整个功能模块的最外层容器上，比如
.dashboard { --spacing: 12px; } - 对 Web Component，必须用 JS 显式设在宿主元素：
el.shadowRoot.host.style.setProperty('--theme', 'dark') - 避免在子选择器（如
.card__title）里声明变量——它只对自己生效，无法供后代复用
JS 修改变量后无视觉变化，常因属性不支持过渡或未触发重绘时机
style.setProperty('--bg', '#f00') 执行成功 ≠ 页面立刻变红。变量更新本身不触发重绘，是否重绘取决于两件事：该变量是否绑定到一个已挂载且可见元素的可动画属性上，以及浏览器是否在下一帧重新计算了该属性值。
典型失效链：
- 变量用于
width: var(--w)→ 改值直接触发重排，但若在 scroll 回调里高频调用，可能卡顿甚至被浏览器节流 - 写了
transition: --bg 0.3s→ 语法错误，transition不接受变量名，必须写transition: background-color 0.3s - 变量值带单位错误，比如传了数字
12而非字符串'12px'，CSS 解析失败 fallback 到初始值，尺寸突变 - 元素当前
display: none或不可见，浏览器跳过其样式计算，变量变更无意义
真正容易被忽略的，是变量和渲染帧之间的断层
你调用了 setProperty，DevTools 里也能看到新值，但页面就是不动——问题往往不在变量本身，而在它下游的渲染链路断了：可能是伪元素没声明 var(--x, #fff) 回退值导致 Safari 静默失效，可能是 will-change 没配对 transform 属性导致主线程卡 paint，也可能是 contain: style 隔离太狠，子树压根没收到通知。
不要假设“设了就生效”，每次修改后必须确认三件事：getComputedStyle(targetEl).getPropertyValue('--x') 是否返回预期值、目标元素的 computed 样式里是否有 var(--x) 被实际解析、该属性是否属于合成层友好类型（color/opacity/transform）。
