css变量能“穿透”shadow dom是因继承机制天然跨boundary向上查找，但必须显式声明在宿主元素或其直系祖先上；:root、body等外部声明无效，:host是唯一可靠中转点。
CSS变量穿透Shadow DOM的原理是什么
CSS变量能“穿透”不是因为浏览器开了后门，而是继承机制天然跨 boundary 向上查找。浏览器对 var(--x) 的求值过程，会沿着元素的 DOM 祖先链逐级向上找定义，直到找到第一个声明了 --x 的祖先节点——这个链路不会被 Shadow DOM 边界截断。
但关键限制在于：**起点必须是宿主元素自身或其直系可访问祖先**（比如 <my-button></my-button> 自己、它的 class 规则、或行内 style）。:root、body、外层 <div class="wrapper"> 都不在宿主的祖先链上，所以无效。
<h3>为什么 document.documentElement.style.setProperty('--x', 'red') 有时不生效</h3>
<p>不是变量没设成功，而是 shadowRoot 内部没消费它，或者消费路径断了。</p>
<ul>
<li>
<code>document.documentElement.style.setProperty('--x', 'red') 确实执行了，但 <my-button></my-button> 的 shadowRoot 根节点（即 shadowRoot.host）默认不继承 :root 的变量
:host { --x: var(--x, #000); } —— 这句把外部传来的值“抄”到 host 自身作用域，供内部子元素继承span { color: var(--x); }，但 span 的父级（比如 shadow root 顶层 <div>）没继承该变量，<code>var() 就会 fallback 或返回 unset
:host 是唯一可靠的变量“入境检查站”
:host 不是装饰性伪类，它是变量进入 shadow tree 的强制中转点。
-
:host { --primary: var(--primary, #3b82f6); }是安全写法；避免:host { --primary: var(--primary); }这种无 fallback 的循环引用 -
:host-context(.dark) { --bg: #111; }只影响:host节点本身，不会自动透传给子元素，子元素仍需靠继承获取 -
:host-context(body.dark)无效 ——:host-context()只认 class、属性、伪类，不支持标签名选择器 - 别在
:host上用all: initial，它会重置所有--*为 invalid，导致var()直接 fallback
多层 Shadow DOM 下变量怎么接力传递
变量不会自动跨多层 boundary 透传，每层都得手动“接棒”。
- 第一层组件 A 接收外部变量，并通过
:host { --color: var(--color); }声明到自身作用域 - 第二层组件 B 插在 A 的
<slot></slot>里，B 的 shadow 内部要读--color，就得从 A 的宿主上继承 —— 所以 A 必须确保自己已声明该变量，且 B 的宿主（即 A 内部的<my-input></my-input>）也得有对应:host中转 - iOS Safari 16.4 之前存在引擎级 bug：哪怕
:host里写了变量，shadow 内部仍读不到，必须做 UA 检测或降级处理
真正容易被忽略的，是变量作用域的“就近查找”本质 —— 它不是广播，也不是全局状态，而是一条精确的祖先链查找路径。挂错位置，就等于没挂。
