:host读不到外部CSS变量是因为不继承父级样式且变量不自动透传Shadow DOM；必须用:host { --x: inherit; }显式承接，或:host-context([data-theme="dark"])条件注入，slot内容需父容器设all: inherit才能继承。
Web Components中:host为什么读不到外部CSS变量
因为 :host 默认不继承父级样式，CSS变量（如 --primary-color）也不会自动透传进 Shadow DOM。直接在组件内部写 color: var(--primary-color) 会 fallback 到初始值或 unset，看起来像“没生效”。
必须显式承接：
-
:host { --primary-color: inherit; }—— 这句不能少，否则门是关死的 - 如果希望变量只在特定主题下生效，用
:host-context([data-theme="dark"]) { --text-color: #fff; }，比 JS 监听更及时 - 绝对不要在
:host里重复赋值，比如--primary-color: #1890ff;，这等于覆盖外部传入，失去定制能力
slot内容如何继承父级CSS变量
Slot 投影的内容本身在 Light DOM，变量作用域取决于插入位置；但一旦被 Shadow DOM 内容器包裹（比如 <div><slot></slot></div>），就可能断链。
正确做法是给 slot 的直接父容器加透传声明：
立即学习“前端免费学习笔记（深入）”；
-
<div style="all: inherit"><slot></slot></div>——all: inherit是关键，它让所有可继承属性（含 CSS 变量）穿透进来 - 避免在该容器上写死具体值，比如
color: #333；改用color: var(--text-color, #333) - 如果只想透传部分变量（如仅
--icon-size），目前需靠container-type: inline-size+@container，但 Safari 支持仍不稳定，慎用
全局变量和主题作用域怎么组织才不打架
把颜色值硬写在 :root 里，等于提前锁死所有可能性。真正可维护的主题系统，得靠“空壳变量 + 作用域注入”。
推荐结构：
-
:root { --color-primary: ; --space-md: ; }—— 全是空值，只占位 [data-theme="light"] { --color-primary: #1890ff; --space-md: 12px; }[data-theme="dark"] { --color-primary: #52c418; --space-md: 16px; }- 组件内只读语义变量，比如
background-color: var(--color-primary);，不关心它具体是多少
命名别绑定组件，--btn-bg-hover 这种名一换主题就得全搜替换；改成 --color-primary-600 + --state-hover 组合更稳。
Vue/React里动态改CSS变量要注意什么
运行时调用 document.documentElement.style.setProperty('--primary-color', '#ff4d4f') 能立刻生效，但容易踩两个坑：
- 没清空旧值就设新值，会导致变量残留（尤其多次切换主题时），建议先
.removeProperty('--primary-color') - 在 Web Components 内部用 JS 改变量，不会触发
:host的继承更新 —— 必须改外部容器（比如<body data-theme="dark">）上的属性 - 若用
<var-style-provider>这类封装组件，它本质是套一层<div style="--x: y">，注意别嵌套太深，否则层级过深影响性能
最易忽略的一点：CSS变量不是“设置即生效”，它依赖级联计算。哪怕你改了 :root，如果某处写了 color: var(--text-color, black) !important，那 fallback 值就会顶掉变量 —— !important 在变量场景下基本等于放弃定制权。
