Shadow DOM 的 CSS 变量是唯一被规范允许的安全主题通信机制，需显式挂载于宿主元素并用 var(--name, fallback) 读取，不继承 :root 或 body 中的声明。
Shadow DOM 的 CSS 变量不是“穿透”的捷径，而是唯一被规范允许的、安全可控的主题通信机制。它不破坏封装性，也不依赖 hack；关键在于变量必须显式挂载在宿主元素上，并由 shadow 内部通过 var(--name, fallback) 主动读取。
变量声明必须落在宿主元素本身
外部设置的变量不会自动进入 shadow tree。哪怕你在 :root 或 body 里写了 --primary: #007bff，shadow 内部依然读不到——因为继承链断在了 shadow host 这一层。
- 正确方式：直接在组件标签上设变量，例如
<my-card style="--card-bg: #f8f9fa; --card-border: #dee2e6;"></my-card> - 或用 CSS 规则绑定宿主：
my-card[theme="light"] { --card-bg: #fff; --card-border: #e2e8f0; } - 小程序中尤其注意：全局变量要写在
page或body下才有效，:root不被支持
内部样式需配合 fallback 并统一使用 var()
shadow 内部不能硬编码颜色或尺寸，所有可定制属性都应通过 var() 引用，并提供合理默认值，防止未定义时样式崩塌。
- 例如：
.card { background-color: var(--card-bg, #fff); border: 1px solid var(--card-border, #e2e8f0); } -
:host样式块中也可用变量控制宿主自身外观：:host { border-radius: var(--card-radius, 8px); } - 避免在
@media或@keyframes中动态读取变量（旧版 Safari 存在兼容问题）
按需暴露变量，兼顾灵活性与封装边界
暴露哪些变量，本质上是在定义组件的视觉 API。太多会削弱封装，太少又限制定制能力。
- 推荐暴露语义化变量，如
--button-bg、--text-primary、--border-radius，而非具体像素或颜色名 - 不建议暴露影响布局结构的变量（如
--grid-template），除非组件明确支持该维度定制 - 对 slot 内容无效：变量无法驱动传入的外部 HTML 节点样式，需配合
::slotted()或要求使用者自行加 class
进阶控制：用 :host 配合状态与上下文
:host 不仅能承载变量，还能响应宿主状态，实现免 JS 的主题分支逻辑。
:host([size="large"]) { --font-size: 1.25rem; }:host(:hover) { --shadow: 0 4px 12px rgba(0,0,0,0.15); }-
:host-context(.dark) { --card-bg: #1e1e1e; }—— 适合暗色模式联动，但注意性能略低
不复杂但容易忽略：变量生效的前提是“宿主上有声明”，而不是“写了就能穿”。只要把声明位置、fallback 机制和作用域边界理清楚，主题系统就能在隔离与定制之间稳稳落地。
