css变量在shadow dom中不自动继承，必须通过:host显式声明（如:host { --my-var: var(--my-var, #007bff); }）才能被内部元素读取；否则var(--my-var)将回退到默认值或undefined。
Web Components 的 Shadow DOM 默认不继承外部 CSS 变量，--my-var 在 :host 或子元素里直接 var(--my-var) 会 fallback 到默认值或 undefined——这不是 bug，是规范行为。必须显式承接或透传。
为什么 :host 读不到父级 CSS 变量
:host 元素本身不继承父级样式，包括 CSS 变量；Shadow DOM 是样式隔离边界，变量不会自动穿透。即使你在 或 :root 定义了 --theme-color，组件内部的 .button { background: var(--theme-color) } 仍可能失效。
- 常见错误现象：
getComputedStyle(host).getPropertyValue('--theme-color')返回空字符串 - 根本原因：变量作用域止步于 Shadow DOM 边界，除非宿主节点自身声明该变量
- 不是所有浏览器都支持变量“隐式继承”，尤其在
adoptedStyleSheets注入后未重置作用域时
在 :host 上用 inherit 显式承接变量
最轻量、兼容性最好的做法：让 :host 主动“接住”变量，再由其子元素自然继承。
- 在组件样式中写：
:host { --theme-color: var(--theme-color, #007bff); } - 这样所有 shadow 内后代都能通过
var(--theme-color)读取，无需重复定义 - 注意顺序：必须在
:host上声明，不能只写在:host-context(...)或子选择器里 - 如果变量来自 Vue 的
v-bind:style，需确保绑定到 host 元素上，例如：<my-button style="--theme-color: red"></my-button>
slot 内容如何继承变量
投射进 <slot></slot> 的 light DOM 节点默认不继承 shadow 内变量，但可以继承 host 上设置的变量——前提是外层容器开启继承链。
- 在
:host上加all: inherit不推荐（会覆盖所有属性），改用color: inherit; background: inherit等按需继承 - 更稳妥方式：在外层容器（比如调用组件的 Vue 模板）上设
style="--theme-color: blue"，并在:host中承接 - 若 slot 内还有嵌套 Web Component，需在其 host 上再次承接，变量不会跨多层 shadow 自动透传
动态注入变量时容易漏掉的点
用 JS 动态修改主题（如换肤）时，仅改 document.documentElement.style 不足以触发 shadow 内响应——因为变量没被重新计算。
- 必须同步更新每个组件的
:host样式，或触发一次shadowRoot.adoptedStyleSheets重载 - 避免在每个组件内重复调用
getComputedStyle(document.documentElement)，应集中读取后批量注入 - Safari 17.4 之前不支持
adoptedStyleSheets动态更新变量，需降级用innerHTML替换<style></style>标签 - 不要依赖
slotchange事件来重设变量——它不感知外部 CSS 变量变更
真正关键的不是“怎么传”，而是“在哪接”：所有穿透都始于 :host 是否主动声明并承接变量。漏掉这一行，后面所有 var() 都是空转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
