var(--color)在shadow dom中回退到fallback的根本原因是变量未显式声明在宿主元素上，因var()沿dom树向上查找最近声明，而shadow dom继承链起点是宿主，不自动继承:root或body变量。
为什么var(--color)在Shadow DOM里总是回退到fallback
根本原因是变量没出现在继承链上。var()不是全局查找，而是沿DOM树向上找最近一个声明了该变量的祖先节点。Shadow DOM的宿主元素（比如<my-button></my-button>）是这条继承链的起点，它不自动继承:root或body里的变量。
常见错误现象包括：
-
:root { --primary: #007bff; }写了，但组件内部color: var(--primary);始终用fallback - 外部给
<my-card class="dark"></my-card>加类，却没在CSS里给.dark设--bg，导致shadow内读不到 - 用了
all: initial或all: unset在:host上，直接切断继承
:host是唯一合法的变量注入入口
:host伪类本身不继承变量，它是你手动把变量“挂”到宿主上的位置。你在组件内部<style></style>里写:host { --c: red; }，等价于给每个<my-button></my-button>节点加了一个默认样式声明。
正确做法只有一条：变量必须显式落在宿主元素节点上。方式包括：
- HTML中写：
<my-button style="--primary: #28a745;"></my-button> - CSS中写：
my-button { --primary: #28a745; }（注意不是my-button::part()） - JS中设置：
el.style.setProperty('--primary', '#28a745');
别写:host { --c: inherit; }——如果宿主自己没设--c，inherit就无源可溯，结果还是无效。
必须带fallback值，且不能嵌套var()
var(--x, #fff)的fallback不是“备用方案”，而是浏览器找不到变量时的兜底；一旦写错，旧版Safari会整条样式失效，文字变不可见。
回退值只能是静态值：
- ✅
color: var(--text-color, #212529); - ❌
color: var(--text-color, var(--fallback, #000));（嵌套var()非法）
Shadow DOM中若变量未声明，var(--x, #fff)仍会fallback，但前提是宿主元素已显式声明过该变量名（哪怕值为unset）。
iOS Safari 16.4之前存在引擎级bug
哪怕你把--theme正确设在:host或宿主元素上，在iOS Safari 16.4及更早版本中，Shadow DOM内部仍可能读不到该变量。这不是写法问题，是WebKit引擎级缺陷，2026年4月21日才修复。
调试时右键宿主元素 → “Show inherited CSS properties”，直接看哪些变量已进入继承链。如果var(--x)显示invalid，大概率是拼错了变量名，或宿主用了all: unset把所有--*清空了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
