Shadow DOM中CSS变量不自动继承，必须显式挂载到宿主元素；:host是唯一能承接并透传变量的入口，但需避免循环引用、all: initial及旧版Safari兼容问题。
Shadow DOM里CSS变量不自动继承，必须显式挂载到宿主元素
CSS变量在Shadow DOM中读不到，不是浏览器bug，而是继承链被隔离——var(--color)查找路径从当前元素开始，向上只走到shadow host，不会继续到:root或body。你在:root里写--primary: blue，对<my-button></my-button>内部完全无效。
常见错误现象：
- DevTools里
Computed面板显示var(--x)为invalid，而不是值或fallback - 外部样式表里
my-button { --c: red; }没生效，但<my-button style="--c: red;"></my-button>可以 - 小程序里
:root声明直接被WXSS解析器忽略
正确做法只有三种等效方式：
- 行内设置：
<my-button style="--bg: #28a745;"> - CSS规则绑定宿主：
my-button[theme="dark"] { --bg: #1e1e1e; } - JS动态设置：
el.style.setProperty('--bg', '#28a745');
:host里转发变量时容易踩的循环引用和all: initial坑
:host是唯一能承接并向下透传变量的入口点，但它本身不自动继承父级变量。你得主动写:host { --bg: var(--bg); }来“接住”外部传入的值——但这句看似简单，实则暗藏陷阱。
立即学习“前端免费学习笔记（深入）”；
关键细节：
- 禁止写
:host { --bg: var(--bg, #fff); }：fallback会触发无限递归，Chrome/Firefox直接卡死或静默失败 - 绝对不要在
:host或shadowRoot.documentElement上用all: initial或all: unset：它会把所有--*设为initial，导致var()直接回退fallback，且不报错 - 若
Computed面板里var(--x)显示invalid，90%是all: initial或变量名拼错
主题定制必须分层设计，不能全量暴露变量
把所有内部颜色、间距、圆角都做成变量暴露出去，表面灵活，实际失控。真正健壮的主题系统需要分层：
- 基础层（组件私有）：
--button-bg、--button-border这类只影响按钮内部，由宿主控制 - 宿主层（容器外观）：
:host { border-radius: var(--button-radius); }让变量也能控制组件整体尺寸、阴影等 - 组合层（状态响应）：
:host(:hover) { --shadow: 0 4px 12px rgba(0,0,0,0.15); }，避免在JS里重复监听
注意：:host只能写在shadow内部的<style>里，外部CSS文件里写my-button:host完全无效。
iOS Safari 16.4前存在引擎级兼容问题
哪怕写法完全正确，在iOS Safari 16.4之前的版本里，var(--x)仍可能返回undefined。这不是代码问题，是WebKit引擎缺陷——变量声明挂在宿主上，但继承链在shadow boundary处被截断。
应对方式很实际：
- UA检测后降级：对旧Safari改用
el.setAttribute('data-theme', 'dark')+ CSS类切换 - 第三方库如Lit，其
css` :host { --c: ${val}; } `本质是字符串插值，绕过继承机制，但失去运行时切换能力 - 微信小程序基础库2.28.0+已支持
::part()，可配合变量做细粒度控制，但:root依然无效，必须用page或body前缀
最常被忽略的是：变量穿透依赖继承链完整性，而all: initial、错误的作用域、以及旧版Safari的引擎bug，三者叠加会让调试变得毫无头绪——先关掉all: initial，再查DevTools的Show inherited CSS properties，最后看UA。
