var(--color)在Shadow DOM中回退fallback的根本原因是变量未声明在宿主或其祖先继承链上；必须显式在<my-button>等宿主元素上设--color，:root或body声明无效，且:host是唯一合法注入入口。
为什么var(--color)在Shadow DOM里总是回退到fallback
根本原因是变量没出现在继承链上——var()不是“查找全局变量”，而是沿DOM树向上找最近的、声明了该名的祖先元素。Shadow DOM的宿主元素（即自定义标签本身，如<my-button>）是继承链的起点，它不自动继承:root或body里的变量。
常见错误现象：
-
:root { --primary: #007bff; }写了，但组件内部color: var(--primary);始终用fallback - 外部给
<my-card class="dark">加类，却没在CSS里给.dark设--bg，导致shadow内读不到 - 用了
all: initial或all: unset在:host上，直接切断继承
正确做法只有一条：变量必须显式落在宿主元素节点上。方式包括：
- HTML中写：
<my-button style="--primary: #28a745;"> - CSS中写：
my-button { --primary: #28a745; }（注意不是my-button::part(...)） - JS中设置：
el.style.setProperty('--primary', '#28a745');
:host不是“转发器”，而是变量注入的唯一合法入口
:host伪类本身不继承变量，它是你手动把变量“挂”到宿主上的位置。你在组件内部<style>里写:host { --c: red; }，等价于给每个<my-button>节点加了一个默认样式声明，后续外部可通过CSS覆盖它。
立即学习“前端免费学习笔记（深入）”；
实用建议：
- 用
:host { --c: var(--c, #007bff); }提供默认值，避免外部未设时整个组件样式崩掉 - 别写
:host { --c: inherit; }——如果宿主自己没设--c，inherit就无源可溯，结果还是无效 - 禁止在
:host里用all: initial，这会清空所有继承属性，包括CSS变量 - 调试时右键宿主元素 → “Show inherited CSS properties”，直接看哪些变量已进入继承链
iOS Safari 16.4之前存在CSS变量继承bug
哪怕你把--theme正确设在:host或宿主元素上，在iOS Safari 16.4及更早版本中，Shadow DOM内部仍可能读不到该变量。这不是写法问题，是WebKit引擎级缺陷，2026年4月21日才修复。
兼容性应对策略：
- 检测用户代理：
if (/iPhone OS 16_[0-3]_/i.test(navigator.userAgent)) { ... } - 对老版Safari降级为JS注入样式：
shadowRoot.querySelector('.inner').style.color = getComputedStyle(el).getPropertyValue('--text-color') || '#333'; - 避免依赖单一变量控制关键视觉，比如用
data-theme="dark"配合class切换兜底
adoptedStyleSheets不传递变量作用域
很多人误以为把含var(--size)的CSSStyleSheet通过adoptedStyleSheets挂进shadowRoot，变量就能自动生效。其实不会——adoptedStyleSheets只是复用样式规则，变量仍需靠宿主继承。
典型错误代码：
const sheet = new CSSStyleSheet();
sheet.replaceSync(`.btn { padding: var(--size, 8px); }`);
shadowRoot.adoptedStyleSheets = [sheet]; // ❌ --size没在宿主上声明，这里永远用8px
必须同步做两件事：
- 确保宿主元素已声明变量：
<my-button style="--size: 12px;"> - 再挂载sheet，此时
var(--size, 8px)才能取到12px
复杂点在于：变量名拼错、作用域错位、被all: initial截断，都会静默回退到fallback，DevTools里不报错也不警告——这是最容易被忽略的地方。
