CSS变量穿透Shadow DOM的使用技巧

CSS变量虽能穿透Shadow DOM，但绝非自动生效——它严格依赖“宿主元素显式声明”和“继承链完整”两大前提：未在:host或自定义元素标签上声明的变量（如:root中定义的）根本无法进入影子树，导致var()解析失败且fallback不触发；:host是唯一可靠、符合规范的注入入口，adoptedStyleSheets仅复用样式而无法传递变量作用域，iOS Safari 16.4前更存在引擎级继承bug需手动降级。真正关键的不是语法怎么写，而是精准把控变量从宿主出发、经CSS继承抵达影子节点的完整生命周期。

CSS变量（自定义属性）能穿透Shadow DOM，但必须满足“继承链存在”和“宿主上已声明”两个硬条件；不是写了--color就能自动传进去，没声明就查不到，fallback也不会触发。

为什么var(--color)在Shadow DOM里有时是空的

根本原因不是浏览器不支持，而是变量没被继承过来。CSS变量本身是可继承属性，但它只沿DOM树向下传递——前提是宿主元素（即自定义元素标签本身）上明确设置了该变量。

• 如果标签上没写style="--color: red"或没在它的CSS规则里声明--color，那它内部shadowRoot里的var(--color)就解析为无效值，直接跳到var(--color, blue)的blue
• :root里定义的--color不会自动进Shadow DOM，因为:root不在宿主元素的继承链上
• 用inherit或initial等关键字也无法绕过这个限制，变量继承只认“父元素是否声明了该名”

:host是唯一可靠的变量注入入口

想让变量进Shadow DOM，必须通过:host显式承接并转发。这是最可控、也最符合规范的做法。

• 在组件内部