CSS变量在Shadow DOM中取不到值，是因为其依赖继承链而非自动穿透；必须在:host或宿主元素上显式声明，:root声明无效，且需避免all: initial截断继承链。
CSS变量在Shadow DOM中“无法访问”，90%是因为没在宿主元素上声明，而不是变量本身不能穿透。
为什么var(--color)在shadow内部写对了却取不到值
CSS变量不是自动跨边界广播的，它依赖继承链——而:root或body不在shadow host的继承路径上。Shadow DOM的根是shadowRoot.host，只有挂载在该host或其祖先（且未被中间节点重置）上的变量才可能被继承。
- 错误做法：在
:root { --primary: #007bff; }里声明，然后期待my-button内部var(--primary)生效 → 失败，因为my-button不继承:root的样式属性 - 正确做法：在
:host { --primary: #007bff; }中声明（写在组件内部的<style>里），或通过JS在宿主元素上设置：el.style.setProperty('--primary', '#007bff') - fallback不是兜底穿透：
var(--missing, blue)中的blue仅在--missing完全未声明时生效；拼错名、作用域错位、被all: initial截断，都会直接回退，不报错也不警告
:host必须显式承接变量，不能靠“默认继承”
:host选择器本身不自动继承父级CSS变量，它是个独立样式上下文起点。你得主动让它“接住”外部传入的变量，否则内部var()永远读不到。
- 安全写法：在shadow内部
<style>中写:host { --c: inherit; }，再让外部通过my-button { --c: red; }注入 - 更推荐：用
:host { --c: var(--c); }，既保持变量名一致，又避免意外覆盖（注意别循环引用） - 禁止在
:host里写all: unset或all: initial，这会切断所有继承，包括CSS变量 - 调试技巧：在DevTools Elements面板中右键宿主元素 → “Show inherited CSS properties”，能直观看到哪些变量已进入继承链
全局主题CSS文件里的:root变量为何对Shadow DOM无效
因为:root只匹配主文档根元素（<html>），而shadow tree有自己的渲染树，不把<html>当作父节点。即使你在<head>里引入了theme.css，里面的:root规则也不会向下穿透到任意shadowRoot。
立即学习“前端免费学习笔记（深入）”；
- 小程序场景：WXSS中必须用
page或body前缀，:root不被支持 - React/Vue项目：若用CSS-in-JS或动态
<style>注入，需确保样式节点插入到宿主元素内部（如shadowRoot.appendChild(styleEl)），而非只挂到document.head - 第三方UI库（如Semi UI v2.59+）：已内置
:host变量桥接逻辑，但前提是你的构建配置启用了样式注入插件，否则:root定义仍无效
JavaScript读取和设置变量的常见陷阱
用getComputedStyle(host)读取变量看似简单，但容易忽略时机和作用域问题；而element.style.setProperty()设值后，样式不会立即重排，尤其涉及calc()或动画时。
- 读取前先确认宿主已连接DOM：
if (this.isConnected) { ... }，否则getComputedStyle(this)返回空对象 - 不要在
constructor里读变量——此时shadowRoot刚创建，但宿主尚未被插入文档，继承链未建立 - 批量更新多个变量时，建议统一用
this.setAttribute('style', '--a:1;--b:2;')，比多次setProperty更可靠 - 动画敏感场景（如主题淡入），需配合
CSS.registerProperty声明变量为可动画属性，否则transition可能失效
最易被忽略的一点：CSS变量穿透不是“魔法”，它是继承 + 显式声明 + 时机控制的组合结果。漏掉任一环节，变量就静默失效，连控制台都不会提醒你。
