CSS变量是Shadow DOM唯一允许的样式通信机制，通过:host声明并由内部var()读取，支持主题动态切换；变量需挂载宿主元素而非外部DOM，作用域受Shadow边界限制，不可穿透slot内部。
Shadow DOM 的 CSS 变量（Custom Properties）不是“穿透”的例外，而是唯一被规范允许的、安全可控的内外样式通信机制。它不破坏封装性，反而在隔离与定制之间架起桥梁：变量声明在宿主元素上，由 Shadow DOM 内部通过 var(--name) 读取，既避免全局污染，又支持运行时动态切换主题。
用 :host 声明变量，让外部控制有据可依
主题能力必须从宿主元素开始定义，而不是写死在 shadowRoot 内部。外部样式表或 JS 只需修改宿主上的自定义属性，组件内部就能响应变化。
- 在 shadowRoot 的
<style>中使用var(--color-primary, #007bff)，提供默认值防回退 - 外部统一设置：
my-button { --color-primary: #28a745; --radius: 6px; } - 支持批量控制：多个同类型组件共享同一组变量，无需逐个操作
限制变量作用域，避免意外继承
CSS 变量默认按 DOM 树继承，但 Shadow DOM 边界会截断继承链——外部 :root 或 body 声明的变量不会自动进入 shadowRoot。必须显式挂载到宿主元素本身。
- 错误写法：
body { --text-color: red; }→ shadowRoot 内var(--text-color)读不到 - 正确路径：变量必须设在组件实例上，如
<my-card theme="dark"></my-card>+my-card[theme="dark"] { --bg: #1e1e1e; } - JS 动态更新：
element.style.setProperty('--bg', '#2d2d2d')，仅影响该实例
组合 :host 伪类，实现条件化主题响应
:host 不仅能承载变量，还能根据宿主状态（属性、伪类）触发不同主题分支，无需 JS 切换 class。
立即学习“前端免费学习笔记（深入）”；
:host([size="large"]) { --font-size: 1.25rem; }:host(:hover) { --shadow: 0 4px 12px rgba(0,0,0,0.15); }:host(:not([disabled])) .control:hover { background: var(--hover-bg); }
规避常见陷阱：变量 ≠ 样式规则
变量只是值容器，不能替代选择器逻辑。想控制子组件样式，仍需通过 ::slotted 或透传属性，不能指望变量“穿透”到 slot 内部的深层结构。
- ❌
div { color: var(--text-color); }对 slot 中传入的<p>无效（除非该p在 shadow 内） - ✅ 正确方式：
::slotted(p) { color: var(--text-color); }或要求使用者在传入内容上主动加 class - ⚠️ 注意：变量无法驱动媒体查询或
@supports，主题适配需配合 JS 检测或预设断点类
