css变量无法默认穿透shadow dom，因继承链被隔离阻断；必须通过:host显式声明、:host-context()（已废弃）或js动态setproperty()三种方式桥接，且all:initial会强制重置变量为invalid。
影子DOM默认阻止CSS变量继承
影子DOM的样式隔离机制会切断:host外部定义的CSS变量向内部传递，这不是bug，而是设计使然——::slotted和:host本身不参与CSS自定义属性的级联链。即使你在全局:root里声明了--primary-color: blue，影子根内部的div { color: var(--primary-color) }也会计算为var(--primary-color)未定义，最终回退到initial值（通常是inherit或transparent）。
让CSS变量穿透影子边界的三种可行方式
没有“自动穿透”方案，必须显式桥接：
- 在
:host上手动转发：外部组件设置:host { --primary-color: var(--primary-color); }，再在影子内部使用——但要求宿主元素自身能读取该变量（即宿主必须在light DOM中被赋予该变量） - 用
:host-context()配合外部类名（已废弃，不推荐） - 最可靠的是在JS中同步：创建
customElements.define时，监听attributeChangedCallback，把style属性或data-*属性解析为element.shadowRoot.documentElement.style.setProperty()
例如：
class MyEl extends HTMLElement {
static get observedAttributes() { return ['theme']; }
attributeChangedCallback(name, _, newVal) {
if (name === 'theme' && this.shadowRoot) {
this.shadowRoot.documentElement.style.setProperty('--theme', newVal);
}
}
}
为什么all: initial会让CSS变量彻底失效
在影子根上误加all: initial（比如想重置所有样式）会导致自定义属性级联被强制中断——因为all是简写属性，它会重置--*所有自定义属性为initial，而initial对自定义属性意味着“未定义”，无法被var()解析。这个行为在Chrome 90+、Firefox 89+中已明确规范。
- 避免在
:host或shadowRoot.documentElement上使用all: initial或all: unset - 如需重置，改用显式列表：
margin: 0; padding: 0; font: initial;等 - 检查DevTools的Computed面板：若
var(--x)显示为invalid而非回退值，大概率是all干扰所致
第三方库（如Lit）如何绕过这个问题
Lit的css模板标签在构建adoptedStyleSheets时，默认不继承外部变量；但它提供unsafeCSS和css` :host { --color: ${someVar}; } `插值能力，本质是把变量值内联进影子样式表——这属于“复制”而非“穿透”。
- 插值只在模板编译时求值，无法响应运行时变更
- 若需动态更新，Lit推荐用
this.requestUpdate()触发重渲染，再重新注入带新值的css块 - 注意：插值中的
${}不是CSS变量，而是JS字符串拼接，不支持var(--x)嵌套语法
真正需要跨边界响应式变量时，仍得靠CustomEvent + style.setProperty组合实现，没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
