CSS变量在Shadow DOM中不继承，必须在:host中显式声明（如:host{--x:var(--x,#000);}）才能透传，否则子元素无法获取；第三方组件常通过:host高权重覆盖:root定义，应优先使用其theme API而非全局修改。
因为 CSS 变量在 Shadow DOM 中默认不继承，--x 在 :host 上不声明就等于不存在——不是“覆盖失败”，是根本没传进去。
Shadow DOM 隔离了变量作用域
CSS 变量不会跨 Shadow DOM 边界自动透传。即使你在 body 或 :root 定义了 --primary-color，<my-button></my-button> 内部的 .btn { color: var(--primary-color) } 仍会 fallback 到初始值（如 currentColor 或 unset）。
-
:host元素本身不继承父级样式，包括所有自定义属性 - DevTools 的 Computed 面板里搜
--primary-color，若显示inherited from，说明没被:host接住 - 用
getComputedStyle(host).getPropertyValue('--primary-color')检查返回空字符串，就是隔离生效了
覆盖必须发生在 :host 层，而不是子元素
在组件内部写 .btn { --primary-color: red; } 是无效覆盖——它只影响 .btn 自身及其后代，对其他子元素或宿主无意义；真正要改的，是让 :host 主动承接并可选重定义。
- 正确做法：
:host { --primary-color: var(--primary-color, #007bff); }—— 显式读取外部值，提供 fallback - 错误写法：
:host .btn { --primary-color: red; }，这无法影响同级的.icon或父级:host - 若想条件覆盖（比如暗黑模式），用
:host-context([data-theme="dark"]) { --primary-color: #1890ff; }，比 JS 监听更及时
第三方组件里变量被静默覆盖的常见原因
你写的 :root { --primary-color: #ff0000; } 很可能完全没生效，因为第三方组件（如 Ant Design）已在自己的样式中用高权重选择器或 :host 内联声明了同名变量。
立即学习“前端免费学习笔记（深入）”；
- 它们通常在
.ant-btn或:host上直接赋值：--primary-color: #1890ff;，加载顺序靠后就赢 - 不要碰
:root改主题，优先用组件支持的theme配置 API（如 Ant Design 的ConfigProvider.theme） - React/Vue 中动态换肤时，仅改
document.documentElement.style不触发 Shadow DOM 重计算，必须同步调用host.style.setProperty('--primary-color', '...')
最容易被忽略的是：变量是否生效，和 HTML 嵌套深度无关，只取决于 :host 是否显式声明了该变量名——哪怕只写 :host { --x: inherit; }，也比在子选择器里反复定义强得多。
