css变量无法进入shadow dom是因为其继承链起点是宿主元素而非:root；必须通过:host声明变量，避免all:initial，并注意命名空间与浏览器兼容性。
不是浏览器不支持，而是 CSS 变量根本没进入 Shadow DOM 的继承链——:root、body 或父容器上声明的 --color 对 Shadow DOM 完全静默无效。
为什么 :root { --x: red } 在 Shadow DOM 里查不到
CSS 变量靠继承传递，而 Shadow DOM 的继承起点是宿主元素（比如 <my-card></my-card>），不是 。DevTools 里点开宿主元素 → “Show inherited CSS properties”，你会发现 --x 压根没列出来。
-
:root只匹配主文档根节点，不在宿主元素的祖先链上，浏览器连“看”都不看它 - 小程序（如微信）中
:root甚至不被 WXSS 解析器识别，必须用page或body前缀 - React/Vue 项目把主题 CSS 注入
document.head，同样穿不进 Shadow DOM
怎么让变量真正“进去”：只认 :host 这一个入口
:host 是唯一可靠、规范、可调试的注入点。它不是“转发器”，而是变量进入 Shadow DOM 的强制安检口。
- 必须写在 Shadow DOM 内部的
<style></style>里：:host { --bg: #fff; }，不能写在 light DOM 的<style></style>中 - 外部可通过宿主元素设置动态值：
<my-card style="--bg: #000"></my-card>或el.style.setProperty('--bg', '#000') - 别用
:host { --bg: var(--bg, #fff) }—— fallback 会触发无限递归，直接卡死样式计算 - 变量名建议带命名空间：
--my-card-bg，避免和全局或其它组件冲突
为什么设了变量却显示 invalid？大概率是 all: initial 搞的鬼
all: initial 不只是重置 margin/padding，它会强制把所有自定义属性（--*）设为 initial，而 initial 对 CSS 变量意味着“未定义”，var(--x) 直接回退到 fallback 或透明色。
- 禁止在
:host或shadowRoot.documentElement上使用all: initial或all: unset - 需要重置样式时，改用显式列表：
margin: 0; padding: 0; font: initial; - DevTools Computed 面板里若看到
var(--x)显示invalid，先搜all:，90% 是它干的 - iOS Safari 16.4 之前存在引擎级 bug：哪怕
:host里写了变量，Shadow DOM 内部仍读不到——必须 UA 检测 + 降级
最常被忽略的点：变量是否生效，和你写没写 var(--x) 没关系，而取决于宿主元素上有没有那个名字的声明；fallback 不是兜底穿透机制，拼错名、作用域断链、all: initial，都会让它彻底失效，且不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
