css变量在shadow dom中失效，90%因未挂载到宿主元素；必须通过my-button { --color: red; }或显式声明，:root无效，:host { --c: var(--c); }是安全承接方式。
CSS变量在Shadow DOM中“失效”，90%不是变量本身的问题，而是没挂到对的位置——它根本没被继承进来。
为什么var(--color)写对了却取不到值
CSS变量依赖继承链，而Shadow DOM边界会截断它。浏览器只沿DOM树向上找，:root或body不在宿主元素的继承路径上，所以声明在那里等于白写。
-
:root { --primary: #007bff; }→ Shadow内部var(--primary)永远回退到fallback，不报错也不警告 - 正确做法是把变量挂到宿主元素自身：
<my-button style="--primary: #28a745;"></my-button>或my-button { --primary: #28a745; } - 调试时右键宿主元素 → “Show inherited CSS properties”，能直接看到哪些变量已进入继承链
:host必须显式“接住”变量，不能靠默认继承
:host不是继承容器，它是个样式上下文起点。你得主动让它承接外部传入的变量，否则内部var()读不到。
- 安全写法：
:host { --c: var(--c); }（注意别循环引用） - 避免
all: initial或all: unset——这会切断所有继承，包括CSS变量 -
:host只能写在shadow内部的<style></style>里，外部CSS文件中无效 - 想让主题也影响宿主容器本身（如圆角、边框），必须用
:host绑定变量，例如：:host { border-radius: var(--button-radius, 4px); }
全局主题不是“一次设置全生效”，而是批量挂载
所谓“全局主题”，其实是同一组变量在多个宿主元素上的重复声明。没有魔法，只有显式赋值。
- 纯CSS方案：用统一class批量设变量，例如
.theme-dark my-button, .theme-dark my-card { --bg: #1e1e1e; } - JS动态方案：
document.querySelectorAll('my-button, my-card').forEach(el => el.style.setProperty('--bg', '#1e1e1e')) - 变量不继承进
<slot></slot>内容——传入的<p></p>不会自动拿到--text-color，需使用者自己加class或透传属性 - 第三方UI库（如Element Plus）若用
:root定义变量，需手动改为:host或通过JS挂载到宿主元素
真正容易被忽略的点是：变量名没约定、没fallback、没挂对位置——这三个地方出错，var()就静默失效，连DevTools都不提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
