:host无法直接继承:root的CSS变量，因Shadow DOM样式隔离导致作用域断开；需在:host中用--var: inherit显式承接，slot内容则需外层容器设all: inherit才能继承。
:host 为什么不能直接继承 :root 的 CSS 变量
因为 Shadow DOM 是样式隔离的独立作用域，:root 只作用于主文档根节点，它声明的 --my-var 不会自动进入 shadow tree。哪怕你在 index.html 的 <head> 里写了 :root { --color: red; }，组件内部写 color: var(--color); 也拿不到——不是语法错，是作用域根本没连上。
常见错误现象：getComputedStyle(this).getPropertyValue('--color') 返回空字符串；CSS 中 var(--color) 回退到初始值（比如 color 变成 inherit 或浏览器默认）。
-
:host元素本身不继承父级样式，所以即使宿主元素上有style="--color: blue"，shadow 内部也不会自动感知，除非显式承接 - 变量透传必须靠继承链，而
:root → body → custom-element → :host这条链在 Shadow DOM 边界被截断 - 不要试图用
!important强行覆盖，它不改变变量作用域，只影响最终计算值的优先级
:host 中声明变量的两种可靠写法
想让变量进得来、用得稳，就得在 :host 上“开门迎客”。关键不是定义新变量，而是把外部传入的值显式接住并向下透传。
- 用
inherit：在组件内部<style>中写:host { --color: inherit; }，这样如果宿主元素（即<my-button>标签）有style="--color: #ff6b6b"，shadow 内所有var(--color)就能解析成功 - 用
initial或具体值兜底：比如:host { --color: initial; }或:host { --color: var(--color, #007bff); }，避免未设值时完全 fallback 到 undefined - 禁止在
:host内部重复赋值同名变量（如--color: #333），否则会屏蔽外部传入，失去配置能力
slot 内容如何正确读取宿主变量
<slot> 投影的内容默认还在 Light DOM，它的变量来源取决于插入位置，而不是组件内部。但一旦你给 <slot> 包了一层 <div>，又没处理继承，变量链就断了。
立即学习“前端免费学习笔记（深入）”；
- 给 slot 外层容器加
all: inherit，例如：<div style="all: inherit"><slot></slot></div>，这是最简单有效的透传方式 - 避免在该容器上硬写
color: red这类具体值，改用color: var(--text-color, #333)，把控制权留给变量 -
::slotted(*)无法穿透到 slot 子元素内部（比如::slotted(div p)无效），所以别指望靠它去设深层样式
动态更新变量时容易忽略的时机问题
用 this.style.setProperty('--color', 'green') 看似没问题，但如果组件还没完成 connectedCallback 或 shadowRoot 尚未挂载，JS 设置的变量可能被后续样式重置覆盖。
- 确保在
connectedCallback或firstUpdated（如果是 Lit）中设置，而不是构造函数里 - 如果依赖外部主题切换（比如
document.documentElement.setAttribute('data-theme', 'dark')），优先用:host-context([data-theme="dark"])做条件样式，比 JS 监听更及时、无重绘延迟 - SSR 场景下，服务端需提前注入变量值（如通过
style标签内联），否则首屏渲染会闪动或样式错乱
真正麻烦的不是写不对，而是变量在哪儿定义、由谁继承、被谁覆盖——这三者稍一错位，var() 就静默失效，DevTools 里还看不出报错。动手前先画清楚作用域树，比反复刷新试错快得多。
