CSS全局变量在子组件中失效的根本原因是作用域断裂，而非未传递；:root定义的变量仅对普通DOM有效，无法穿透Shadow DOM、root-portal或脱离常规DOM流的第三方组件。
CSS全局变量（--xxx）在子组件里读不到，根本原因不是“没传”，而是它压根没进到那个作用域里——:root声明的变量只对普通DOM有效，遇到Shadow DOM、root-portal、或scoped样式包裹的子组件，继承链就断了。
为什么:root定义的--color在Vue子组件里失效
Vue的<style scoped>本身不影响CSS变量作用域，但常见组合场景会出问题：
- 父组件用
:root { --color: red }，子组件却在<style scoped>里写div { color: var(--color) }——只要子组件没被:root后代选择器匹配到（比如用了createPortal或动态挂载），var()就查不到 - 子组件用了
shadow: open（如自定义元素或某些UI库内部实现），:root的变量无法穿透边界，必须显式设在宿主元素上：<my-button style="--color: red"> - 第三方库（如Element Plus）的表格、弹窗等组件，内部结构可能脱离常规DOM流，
:root变量对其无效
微信小程序root-portal中--xxx不生效怎么办
微信的root-portal本质是将节点从当前文档树移出并重挂载，导致原app.wxss中定义的--xxx变量丢失上下文。
- 不要指望在
app.wxss里写:root { --z-index: 999 }就能让弹窗生效 - 必须在
root-portal组件自身的.wxss里重新声明：.portal-wrapper { --z-index: 999; } - 如果需要复用，改用JS透传：父页面通过
properties传入颜色值，子组件用style="--bg-color: {{bgColor}}"写死到根节点
React/Vue中var(--x)显示为字面量而非计算值
开发者工具的Computed面板里看到color: var(--text-color)没被解析，说明变量查找失败，不是语法错，而是路径断了。
立即学习“前端免费学习笔记（深入）”；
- 检查目标元素的任意祖先（含自身）是否真有
--text-color定义——用Elements面板逐层点开，看哪一层的Styles里有该变量声明 - 警惕
all: unset：某个父级用了all: unset，会直接切断var()向上查找，整条链失效 - 确认变量名拼写：
--text-color≠--textcolor≠--text-colour，连字符数量、大小写、顺序全要一致 - 在
@media里重定义变量时，确保媒体查询已触发且目标元素处于该块作用域内
最常被忽略的一点：你以为:root是“全局”，但它只是HTML根元素；真正决定var()能否取值的，是目标元素在DOM树中**向上能触达的第一个定义了该变量的祖先节点**——这个节点可能远比你想象的更近、更具体，也可能根本不存在。别猜，打开Elements面板，手动往上翻两层看看。
