组件级颜色覆盖需在组件根元素声明变量并确保子元素继承，而非修改全局:root；动态更新应操作具体dom节点样式，避免全局广播；fallback值须为静态色且不可嵌套var()。
组件级颜色覆盖不是靠“覆盖”已有的全局变量，而是让每个组件自己声明一套变量，并确保子元素只读取它——关键在声明位置和命名控制，不在覆盖动作本身。
为什么直接改 :root 里的 --primary-color 会失效
改 :root 是全局操作，所有用 var(--primary-color) 的组件都会响应。如果你只想让某个 .card 实例变深色，而 .button 保持浅色，这种做法就破坏了隔离性。浏览器不区分“谁该更新”，它只按继承链取值：哪个祖先最近声明了该变量，就用哪个。
-
:root { --primary-color: #007bff; }→ 全局生效，无法局部控制 - 想局部生效，必须把变量声明下沉到组件容器上，比如
.card { --card-primary: #3b82f6; } - 子元素写
color: var(--card-primary, #007bff);，才能真正绑定到这个实例
.card { --card-bg: #fff; } 必须写在组件根元素上
变量作用域不看 DOM 深度，而看 CSS 选择器是否命中并声明了该变量。如果写成 .card-header { --card-bg: #f0f0f0; }，那只有 .card-header 自己能读到，它的子元素（如 .card-title）反而取不到——因为变量没在祖先上声明。
- 正确：给
.card元素加类，然后在 CSS 中写.card { --card-bg: #fff; --card-text: #1f2937; } - 错误：在
.card-body或.card-footer里重复声明同名变量，造成维护混乱和权重干扰 - 若组件用 Shadow DOM，需显式透出：
:host { --card-bg: #fff; }，否则变量不会自动继承
JS 动态更新时别碰 documentElement.style
调用 document.documentElement.style.setProperty('--card-bg', '#1a1a1a') 看似简单，实则把变量改成了全局行为，所有 .card 都会同步变色。这不是覆盖，是广播。
- 精准做法：拿到具体组件 DOM 节点
cardEl，执行cardEl.style.setProperty('--card-bg', '#1a1a1a') - 批量更新更推荐
Object.assign(cardEl.style, { '--card-bg': '#1a1a1a', '--card-text': '#e0e0e0' }) - 绝对避免
cardEl.style.cssText = '...'—— 它会清空已有内联样式，包括width、margin等非变量属性
fallback 值必须是静态色，且不能嵌套 var()
color: var(--card-text, #1f2937) 是安全写法；但 color: var(--card-text, var(--fallback-text)) 在旧版 Safari 里整条声明会被忽略，导致文字变透明或默认黑。
- fallback 只在「当前作用域查不到变量」时才启用，不是兜底逻辑开关
- 如果想强制走 fallback，得先在组件内设
--card-text: unset;，再用var(--card-text, #1f2937) - 多级降级要展开写：
color: var(--card-text, var(--theme-text, #1f2937));，别省那几行
最容易被忽略的是：变量是否生效，和 HTML 结构嵌套深度无关，只取决于 CSS 选择器是否真的在对应 DOM 节点上声明了它——哪怕那个节点是平铺的 div，只要类名对、选择器匹配、声明位置对，变量就能精准落位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
