DevTools显示宿主值而非组件库值，是因为组件库变量（如--primary-color）仅声明在组件选择器内部（如.ant-btn），未在继承链上正确暴露；Shadow DOM中更需显式挂载至宿主元素，否则var()直接fallback。
宿主项目覆盖组件库的 CSS 变量，不是因为“发布后变了”，而是因为变量声明位置和继承链被误判——组件库的 --x 在宿主项目里根本没被正确声明在继承路径上，浏览器自然回退到宿主定义的值。
为什么 DevTools 里看到的值是宿主的，不是组件库的？
组件库（如 Ant Design、Element Plus）发布的 CSS 文件中，--primary-color 等变量通常只出现在组件选择器内部（如 .ant-btn），而非 :root 或容器类上。这意味着：
- 它只对匹配该选择器的元素及其后代生效，且仅当该元素是变量声明者的 DOM 后代时才继承
- 如果组件用 Shadow DOM 封装（如 Lit、Stencil 组件），宿主项目写的
:root { --primary-color: red }根本透不进去，但组件内部又没显式声明该变量，var(--primary-color, blue)就会 fallback 到blue——你以为是“被覆盖”，其实是“压根没声明” - DevTools 的 Computed 面板里搜
--primary-color，若显示inherited from，说明组件自身没设，完全依赖宿主或:root
组件库打包后变量“消失”的真实原因
多数组件库构建时会做 CSS 压缩或作用域处理：
- 未启用 CSS 自定义属性提取（如 PostCSS plugin for custom properties），
--x被当作普通字符串丢弃或重命名 - 使用
all: unset重置样式时，会清空所有继承来的--*变量（包括宿主传入的），导致var(--x)直接 invalid - 构建工具（如 Vite）默认不解析
@import中的 CSS 变量引用，index.css里写的--x若没被任何选择器包裹，会被忽略
如何让组件库变量真正“可被覆盖”而不是“被静默替换”？
关键不是阻止宿主写变量，而是确保组件库主动暴露声明点：
立即学习“前端免费学习笔记（深入）”；
- 检查组件库文档是否提供主题容器类（如
ant-provider、el-config-provider），把变量声明在它上面：.el-config-provider { --el-color-primary: #2c5e1a; } - 避免在
:root写变量去“全局接管”，改用宿主元素上的内联 style：<my-button style="--my-color: #ff6b35"></my-button>—— 这种方式优先级最高，且不污染全局 - 若组件支持 JS 主题注入（如
buttonRef.style.setProperty('--color', '...')），优先走 JS 路径，绕过 CSS 加载顺序问题 - 调试时临时加一行
* { outline: 1px solid red !important; }，确认目标元素是否真被组件库的选择器命中——很多“覆盖失效”其实是选择器根本没匹配上
最容易被忽略的是：组件库发布的 CSS 文件里，--x 往往只是“消费端”，不是“声明端”。它指望你先在某处定义好，而不是自己兜底。所谓“被覆盖”，常常只是声明缺失后的自然 fallback。
