CSS变量穿透是企业级主题首选方案，因其天然继承、零兼容风险且不破坏Shadow DOM封装性，支持多主题、灰度发布等场景。
用 CSS 自定义属性（即 CSS 变量）穿透 Shadow DOM 边界，是当前唯一标准、稳定且可维护的主题定制方案。它不破坏封装性，又让外部能安全地影响内部视觉表现，特别适合企业级多主题、多品牌、灰度发布等场景。
为什么变量穿透是企业级主题的首选
Shadow DOM 的样式隔离是刚性的：外部 CSS 选中器进不去，内部样式也出不来。过去尝试的 /deep/、::shadow 已被移除；:host-context() 被 Chrome 99+ 废弃且无跨浏览器支持。而 CSS 变量天然继承、自动透传，只要没被 all: initial 或 all: unset 截断，就能从 light DOM 一路流进 shadow tree 深处——这是浏览器原生机制，零兼容风险，零运行时开销。
主题变量的设计与注入方式
主题不是写死在组件里，而是由上层统一管理并注入：
- 在应用根节点或主题容器元素上设置变量，例如：
<div id="app" style="--theme-primary: #2563eb; --theme-radius: 8px; --theme-shadow: 0 2px 8px rgba(0,0,0,0.1);"></div> - 变量命名建议带命名空间前缀（如
--myorg-color-brand），避免与第三方库冲突 - 支持动态切换：通过 JavaScript 修改父级元素的
style属性或 class，触发整条变量链重计算
组件内如何安全消费变量
组件 Shadow Root 内部不硬编码颜色或尺寸，全部使用 var() 函数，并提供合理 fallback：
.button { background: var(--theme-primary, #007bff); border-radius: var(--theme-radius, 4px); }- 对关键变量做分层 fallback，例如：
color: var(--theme-text-primary, var(--theme-text-default, #333)); - 避免在
:host上直接设all: initial，否则会切断变量继承链
配合 Custom Elements 实现主题响应式更新
自定义元素可在属性变更或生命周期中主动响应主题变化：
- 监听父容器类名或数据属性变化（如
data-theme="dark"），动态更新自身 style 属性 - 在
attributeChangedCallback中调用this.shadowRoot.querySelector('style').textContent = newThemeCSS（仅限极简场景） - 更推荐方式：将主题变量作为配置项传入组件属性，再映射为内部 style，保持声明式逻辑清晰
