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>），不是<html>。DevTools里点开宿主元素 → “Show inherited CSS properties”，你会发现--x压根没列出来。:root只匹配主文档根节点，不在宿主元素的祖先链上，浏览器连“看”都不看它。
- 小程序（如微信）中
:root甚至不被WXSS解析器识别，必须用page或body前缀 - React/Vue项目把主题CSS注入
document.head，同样穿不进Shadow DOM -
document.documentElement.style.setProperty('--x', 'red')设了也没用，除非宿主元素自己也声明了该变量
怎么让变量真正“进去”：只认:host这一个入口
:host是唯一可靠、规范、可调试的注入点。它不是“转发器”，而是变量进入Shadow DOM的强制安检口。
- 必须写在Shadow DOM内部的
<style>里：:host { --bg: #fff; }，不能写在light DOM的<style>中 - 外部可通过宿主元素设置动态值：
<my-card style="--bg: #000">或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)没关系，而取决于宿主元素上有没有那个名字的声明；拼错名、作用域断链、all: initial，都会让它彻底失效，且不报错。
