CSS变量在Shadow DOM中必须显式声明在宿主元素上才能生效，:root或父容器声明无效；:host是唯一合法注入入口，可通过行内style、CSS规则或JS动态设置，且需避免all: initial/unset破坏继承。
CSS变量在Shadow DOM中不是“无法继承”，而是继承链根本没搭上——--color必须声明在宿主元素（比如<my-button>）自身，写在:root、body或父容器上，Shadow DOM内部的var(--color)就一定会回退到fallback。
为什么var(--x)在Shadow DOM里显示invalid
常见错误是把变量定义在非宿主节点上：
-
:root { --x: red; }——<html>不在Shadow DOM继承链里，DevTools的“Show inherited CSS properties”里压根看不到该变量 -
.theme-dark { --x: red; }+<my-button class="theme-dark">—— 类名挂在宿主上，但变量没声明在宿主自身，依然无效 -
.wrapper > my-button { --x: red; }—— 这是父选择器，变量没落到<my-button>节点上，继承链直接断裂 - 拼错变量名，比如
--X和--x大小写不一致，或中间多了空格
验证是否挂载成功，用getComputedStyle(host).getPropertyValue('--x')，返回空字符串就说明没设上。
三种等效的宿主变量设置方式
只要变量最终落在宿主DOM节点上，就满足继承起点要求。选哪种取决于控制粒度和运行时需求：
立即学习“前端免费学习笔记（深入）”；
- HTML行内：
<my-card style="--card-bg: #f8f9fa; --border-radius: 8px;"> - CSS规则绑定宿主：
my-card[theme="dark"] { --card-bg: #1e1e1e; }（注意不是my-card::part()） - JS动态设置：
el.style.setProperty('--card-bg', '#f0f0f0');（适合主题切换、用户偏好同步）
别指望::slotted(*)或::part()能传递变量——它们只负责样式锚点或投射内容样式，不参与变量继承链。
:host里转发变量的致命陷阱
:host是唯一合法注入入口，但它本身不自动继承父级变量，必须显式“接住”：
- ✅ 安全写法：
:host { --primary: var(--primary, #007bff); }—— 提供fallback，避免未传值时样式崩塌 - ❌ 禁止写：
:host { --primary: var(--primary, #fff); }—— fallback会触发无限递归，Chrome/Firefox可能卡死 - ❌ 绝对不要用：
:host { all: initial; }或:host { all: unset; }—— 它会清空所有自定义属性，var()直接回退fallback且不报错 - ❌ 别写：
:host { --primary: inherit; }—— 如果宿主自己没声明--primary，inherit就无源可溯
:host规则必须写在Shadow DOM内部的<style>里，外部CSS文件中写my-button:host完全无效。
iOS Safari 16.4前的兼容性坑
即使你把--theme正确设在宿主或:host上，在iOS Safari 16.4及更早版本中，Shadow DOM内部仍可能读不到该变量——这不是写法问题，是WebKit引擎级缺陷，2026年4月21日才修复。调试时如果发现其他浏览器正常、唯独Safari异常，先查版本号；若无法升级，只能用JS fallback（如el.setAttribute('data-theme', 'dark') + 属性选择器）兜底。
