css变量在shadow dom中必须显式声明在宿主元素上才能生效，:root或外部父容器声明无效；:host是唯一合法注入入口，可通过行内style、css规则或js动态设置，且需避免all: initial/unset破坏继承。
Shadow DOM 中 CSS 变量不能自动从 :root 或外部父容器“漏”进来，必须显式挂载到宿主元素（host）上才能被内部消费——这不是 bug，是设计使然。
变量必须声明在宿主元素上，:root 无效
你在 上设 document.documentElement.style.setProperty('--color', 'red')，Shadow DOM 内部写 color: var(--color) 依然 fallback，因为继承链起点是宿主节点（比如 <my-button></my-button>），不是 。DevTools 的 “Computed” 面板里根本看不到该变量出现在宿主的 inherited 属性中。
-
:root { --color: red }对所有 Shadow DOM 静默无效，iOS Safari 16.4 前甚至不解析 - 写成
.wrapper > my-button { --color: red }也无效——变量没落在my-button自身节点上 - 小程序（如微信）里
:root不被 WXSS 解析器识别，必须用page或body前缀
:host 是唯一合法注入入口
:host 不是“转发器”，而是你把变量“挂”进 Shadow DOM 的唯一合法位置。它本质等价于给每个宿主元素加一条内联样式声明。
- 组件内部
<style></style>中写：:host { --primary: var(--primary, #007bff); }—— 提供安全 fallback，避免未传值时样式崩塌 - 禁止写
:host { --primary: inherit; }—— 如果宿主自己没声明--primary，inherit就无源可溯 - 绝对不要在
:host上用all: initial或all: unset—— 它会清空所有继承属性，包括 CSS 变量，var()直接回退 fallback
三种等效的宿主变量设置方式
只要变量最终落在宿主 DOM 节点上，就满足继承起点要求。选哪种取决于你的控制粒度和运行时需求：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- HTML 行内：
<my-card style="--card-bg: #f8f9fa; --border-radius: 8px;"></my-card> - CSS 规则绑定宿主：
my-card[theme="dark"] { --card-bg: #1e1e1e; }（注意不是my-card::part()） - JS 动态设置：
el.style.setProperty('--card-bg', '#f0f0f0')（适合主题切换、用户偏好同步）
别指望 ::slotted(*) 或 ::part() 能传递变量——它们只负责样式锚点或投射内容样式，不参与变量继承链。
调试时怎么看变量是否真正生效
别只看 getComputedStyle(el).color 返回原始值就断定变量失效；它可能只是没被消费，或被 UA 样式覆盖。真正有效的检查路径是：
- 打开 DevTools → Elements 面板 → 展开宿主元素 → 点开 shadow root → 选中目标子元素
- 在 Styles 标签页下拉到底，找 “Computed” 区域 → 搜索
--card-bg是否列出，值是否为预期 - 如果
var(--card-bg)显示invalid，八成是拼错变量名、all: initial干扰，或宿主上根本没声明
跨多层 Shadow DOM 时，每层都得手动接力：上层宿主声明 → 下层 :host 中转 → 再下层再中转。没有自动透传，也没有“全局广播”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
