css变量需通过:host显式中转才能进入shadow dom，否则不生效；变量作用域就近查找且不自动跨多层shadow boundary透传，每层须手动接力传递。
CSS变量（--my-color）在Shadow DOM外部能设，但必须在正确的作用域里生效，否则改了也白改。
为什么document.documentElement.style.setProperty('--my-color', 'red')有时不生效
不是变量没传进去，而是 shadowRoot 内部没用 var(--my-color) 引用它，或者引用位置不对。CSS变量靠继承链传递，而 Shadow DOM 的根节点（shadowRoot.host）默认不自动继承 :root 下的变量——除非你显式让 :host 继承或转发。
-
:host元素本身不会自动把 document.documentElement 的变量继承给 shadow tree；得靠:host { --my-color: var(--my-color, blue); }这类声明“中转”一次 - 如果组件内部写的是
div { color: var(--my-color); }，但div的父级（比如#shadow-root下的顶层<div>）没继承该变量，那 <code>var()就会回退到初始值或unset - 变量作用域是“就近查找”，不是全局广播：你在
设的--x，对<my-el></my-el>有效；但对<my-el></my-el>内部的<slot></slot>子节点是否有效，取决于 slot 分发后实际挂载的位置是否还在继承链上 -
:host { --text-color: var(--text-color, #333); }—— 把外部传来的--text-color拷贝一份到 host 自身作用域，供内部var(--text-color)使用 -
:host-context(.dark) { --bg-color: #111; }—— 当<my-el class="dark"></my-el>或其任意祖先有.dark时，才激活这条规则；注意它只影响:host节点，不自动透传给子元素 - 别指望
:host-context(body.dark) { ... }——:host-context()只认 class、属性、伪类，不支持标签名选择器 - 用 DevTools 的 Elements 面板展开 shadow root，选中目标元素，在 Styles 标签页看 “Computed” → 找
color值来源，确认是不是标着inherited from :host或from <style></style> - 如果看到
color: blue来自 user agent，说明浏览器默认样式压过了var(--color)；此时需在 shadow 内部加a { color: var(--color, inherit); }强制继承 - 动态设置变量后没重绘？确保不是在
requestIdleCallback或异步时机里改的——变量更新是同步的，但样式重计算可能被节流 - 第一层组件 A 的
:host接收外部变量，并设为自身 CSS 变量；第二层组件 B 插在 A 的 slot 里，B 的:host又得从 A 的:host上读取并转发，不能跳过 - 不要试图用
adoptedStyleSheets替代变量——它共享的是整张样式表，无法响应运行时变量变化 - 嵌套深了容易漏传，建议在每层组件的
connectedCallback里用this.shadowRoot.host.style.setProperty()主动同步关键变量，比纯 CSS 更可控
:host 和 :host-context() 在变量传递中的真实角色
:host 是变量“入境检查站”，:host-context() 是“条件签证官”。它们不直接定义样式，而是控制变量是否被带进 shadow tree。
常见错误：变量设了，但 computed style 里看不到
打开 DevTools 查 getComputedStyle(el).color 返回原始值，不代表变量没起作用——可能只是没被消费，或被用户代理样式覆盖。
多层 Shadow DOM 下变量怎么穿透
变量不会自动跨多层 shadow boundary 透传，每层都得手动“接力”。
变量封装性不是 bug，是设计前提：它强制你明确声明“哪些值可被外部影响”。漏掉 :host 中转、忽略用户代理样式的压制、或高估继承深度，才是多数人卡住的地方。
