CSS变量在Shadow DOM中的继承规则是什么？使用:host传递变量

CSS变量在Shadow DOM中无法自动继承自:root或body等全局作用域，其核心规则是：变量必须显式声明在宿主元素（即自定义标签本身）上，才能被Shadow DOM内部通过var()正确读取；:host伪类并非“转发器”，而是唯一合法的变量注入入口，任何遗漏、拼写错误、all: initial截断或iOS Safari 16.4及更早版本的WebKit引擎缺陷，都会导致变量静默回退到fallback——而DevTools对此毫无提示，极易引发样式失效却难以排查的问题。

为什么var(--color)在Shadow DOM里总是回退到fallback

根本原因是变量没出现在继承链上——var()不是“查找全局变量”，而是沿DOM树向上找最近的、声明了该名的祖先元素。Shadow DOM的宿主元素（即自定义标签本身，如）是继承链的起点，它不自动继承:root或body里的变量。

常见错误现象：

• :root { --primary: #007bff; }写了，但组件内部color: var(--primary);始终用fallback
• 外部给加类，却没在CSS里给.dark设--bg，导致shadow内读不到
• 用了all: initial或all: unset在:host上，直接切断继承

正确做法只有一条：变量必须显式落在宿主元素节点上。方式包括：

• HTML中写：
• CSS中写：my-button { --primary: #28a745; }（注意不是my-button::part(...)）
• JS中设置：el.style.setProperty('--primary', '#28a745');

:host不是“转发器”，而是变量注入的唯一合法入口

:host伪类本身不继承变量，它是你手动把变量“挂”到宿主上的位置。你在组件内部

密码登录在这里

微信扫码登录或注册

打开微信扫一扫，快速登录/注册

登录即同意 用户协议 和 隐私政策

微信登录更方便

• 密码登录
• 注册账号

忘记密码

登录

注册

登录即同意 用户协议 和 隐私政策

返回登录

• 重置密码

发送验证码

重置密码