css变量在shadow dom中需通过:host显式声明才能继承，因继承链仅限直接父节点（宿主元素），不向上追溯祖先；变量须写在shadow内的:host规则中，并设fallback值防崩溃。
CSS变量在Shadow DOM里不是“无法继承”，而是继承链没搭对——宿主元素（host）上没设值，变量根本进不去。
为什么var(--color)在shadow内部取不到值
常见错误是把变量写在或外层容器上，比如：.theme-dark { --primary: #3b82f6; }，但宿主元素没加这个class，变量就卡在shadow boundary外了。Shadow DOM的继承只认直接父节点（即自定义元素自身），不认祖先链上的任意节点。
- ✅ 正确做法：变量必须声明在
:host或宿主元素的class/attribute上，例如<my-card class="dark"></my-card>+:host(.dark) { --card-bg: #1e293b; } - ❌ 无效写法：
body { --card-bg: #1e293b; }或.wrapper { --card-bg: #1e293b; }—— 这些样式不会透入shadow tree - 注意
:host规则必须写在shadow内部的<style></style>里，不能写在light DOM中
如何用:host安全暴露变量给shadow内部
:host是唯一能从shadow内部影响宿主自身样式的入口，也是变量注入的必经通道。它既可设基础样式，也能挂变量，关键是要显式绑定。
- 在shadow的
<style></style>中写：:host { --text-color: var(--theme-text, #1e293b); color: var(--text-color); } - 如果想支持多主题，用
:host([theme="dark"]) { --bg: #0f172a; }配合HTML属性切换 - 别漏掉fallback值：
background-color: var(--card-bg, #ffffff);，避免变量未定义时样式崩溃 - 变量名建议带命名空间，如
--my-card-bg，防止和全局变量冲突
currentColor和inherit在shadow里的行为差异
currentColor能跨boundary，inherit不能——这是常被忽略的关键区别。因为currentColor依赖的是宿主元素最终计算出的color值，而inherit只继承声明值，且在shadow boundary处中断。
- 要在slot内容中复用宿主颜色，得这么写：
:host { color: var(--theme-color, #3b82f6); } ::slotted(*) { color: currentColor; } - 不要在CSS变量里写
--x: inherit，CSS变量不支持继承关键字，会直接失效 - 如果宿主没显式设
color（哪怕只是color: var(--c)），currentColor就无源可溯
调试时最容易卡住的三个点
DevTools里看不到变量生效？大概率是以下某个环节断了。
- 检查宿主元素是否真有对应class/attribute，用
getComputedStyle(host).getPropertyValue('--my-var')确认值是否存在 - 确认
:host样式块是否已插入shadowRoot，而不是写在light DOM的<style></style>里 - 变量名大小写敏感，
--MyVar和--myvar是两个变量；Chrome DevTools的Computed面板里搜var能看到所有生效的变量，但只显示当前元素继承到的
真正麻烦的不是变量传不进去，而是传进去之后被shadow内部某条更高优先级的规则覆盖了——这时候得看Computed面板里var(--x)展开后的实际值来源，而不是只盯CSS文件顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
