组件主题隔离靠就近声明、命名空间和作用域继承三步闭环；:root定义--primary-color会导致全局绑定失控，正确做法是在.button、.card等选择器内分别声明--button-bg、--card-bg等带前缀的局部变量。
组件主题隔离不是靠把变量塞进 :root，而是靠「就近声明 + 命名空间 + 作用域继承」三步闭环。全局变量一写就串，局部变量一漏就失效。
为什么 :root 里定义 --primary-color 会导致组件主题失控
因为所有用 var(--primary-color) 的地方都读同一个源头，按钮、卡片、输入框全被绑死。改一个值，整页 UI 跟着抖——这不是主题切换，是主题绑架。
- ✅ 正确做法：
.button { --button-bg: #007bff; }、.card { --card-bg: #fff; }，变量只在对应选择器作用域内生效 - ❌ 错误写法：
:root { --primary-color: #007bff; }后再让.button和.card都去读它 - ⚠️ Vue/React 中尤其容易踩坑：写了
<style scoped></style>却没在根元素选择器里声明变量，结果var(--size)计算值为空，渲染成浏览器默认色
var(--color, #333) 的 fallback 不是可选，是必须
Shadow DOM 或 scoped 组件里，变量继承链极易中断。不带 fallback 的 var(--text-color) 在未定义时会静默回退到 inherit，深色背景上文字直接消失。
- ✅ 必须写成：
color: var(--text-color, #333);、border-radius: var(--radius, 4px); - ❌ 禁止嵌套：
var(--color, var(--fallback))无效，fallback 不支持变量或表达式 - ⚠️ 小程序中更敏感：微信开发者工具对无 fallback 的
var()更宽容，但真机上常白屏或错色
主题切换该操作 element.style.setProperty() 还是切 class
局部换肤优先改组件级 style，整页换肤才动 document.documentElement。前者锁死影响范围，后者触发全量重排。
- ✅ 单个卡片变暗：
cardEl.style.setProperty('--card-bg', '#1d1d1d'); - ✅ 全局主题切换：
document.documentElement.style.setProperty('--theme-accent', '#faad14'); - ❌ 用
classList.toggle('theme-dark')再配一堆 CSS 规则：耦合重、调试难、易漏覆盖 - ⚠️
all: initial或all: unset会清空继承链，:host上慎用——变量直接丢失
Scoped CSS 中变量怎么传进子组件
<style scoped></style> 本身不传递 CSS 变量，它只加属性选择器。变量要生效，必须显式挂载在宿主元素上，或通过父容器类名“透传”。
- ✅ 正确：
<my-button class="dark"></my-button>+.dark { --button-bg: #333; } - ✅ Shadow DOM 宿主显式挂载：
<my-button style="--button-bg: #52c418;"></my-button> - ❌ 把变量写在
body或外层div上，子组件内部var(--button-bg)读不到——Shadow DOM 截断继承 - ⚠️ Vue 中若用
<style scoped></style>，变量声明必须在根元素选择器内（如.my-button），不能只写在子选择器（如.my-button__inner）里
真正麻烦的从来不是怎么写变量，而是变量在哪声明、由谁继承、失效时有没有 fallback——这些细节漏掉一个，主题就断在某个按钮上，还查不出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
