css变量是唯一原生支持、不破坏shadow dom封装的主题穿透方式，因var()通过继承链自然跨边界求值；变量必须声明在宿主元素上才有效，而非父容器或:root。

Shadow DOM 的 CSS 变量是唯一被浏览器原生支持、无需 polyfill 且不破坏封装性的主题穿透方式——它不是“绕过隔离”，而是通过继承链的自然求值完成跨边界通信。其他所谓“穿透”手段（如 ::part()、/deep/、::shadow）要么兼容性差，要么已被废弃或限制严格。

为什么 var(--color) 能生效而普通选择器不能

Shadow DOM 的样式隔离是硬性边界：外部写的 .btn-inner 或 button:hover 根本不会进入 shadow tree 的样式匹配流程。但 var(--color) 是一个延迟求值的继承属性引用，浏览器在计算最终样式时，会从当前元素向上遍历 DOM 树（含 shadow host），直到找到定义该变量的祖先节点。这个过程天然跨影子边界，但前提是变量必须声明在宿主元素自身或其 light DOM 祖先上。

• 写在 :root 或 body 上，在小程序或某些微前端沙箱中可能失效（因宿主未继承）
• 写在父容器（如 <div class="theme-dark">）上，但宿主没加 <code>class="theme-dark"，变量无法继承到 shadow 内部
• 拼错变量名（如 --btn-bg-color vs --button-bg-color）会导致静默回退到 fallback，无报错提示

-- 变量该设在哪？宿主元素上才真正有效

变量必须显式绑定在宿主元素（即自定义标签本身）上，才能确保 shadow 内部稳定读取。这是最容易被忽略的实操细节。

• ✅ 正确：<my-card theme="modern" style="--card-radius: 12px; --card-shadow: 0 4px 12px rgba(0,0,0,0.1);"></my-card>
• ❌ 无效：<div class="theme-modern"><my-card></my-card></div>（变量设在 div 上，my-card 不继承）
• 小程序中尤其注意：app.wxss 里写 page { --primary-color: #1890ff; } 才能被继承；只写 :root 会被忽略
• 动态绑定时，style 字符串必须完整，漏掉分号或单位（如 "--size: {{size}}" 缺 px）会导致整条声明失效

用 :host 控制宿主自身样式，而非仅内部元素

只靠变量改 shadow 内部的 .content 或 button 还不够——主题常需调整组件整体尺寸、边框、圆角等宿主级外观。这时必须在 shadow 内部的 <style></style> 中使用 :host 并结合变量。

• :host 只能在 shadow root 的内联 <style></style> 中使用，不能写在外部 CSS 文件里
• 示例：:host { border-radius: var(--card-radius, 8px); padding: var(--card-padding, 16px); }
• :host-context(.dark) 可响应外部类名切换暗色模式，但 Chrome 99+ 已废弃，不推荐用于新项目
• 禁止写 :host .inner 这类复合选择器——语法非法，会被浏览器忽略

何时该用 exportparts + ::part() 补位

当组件内部未暴露某个样式钩子（比如图标颜色、禁用态文字透明度），而你又不能改源码时，exportparts 是唯一合规补救方案。但它不是替代变量，而是配合使用。

• 组件需主动标记：<span part="icon"></span>，并在宿主加 exportparts="icon"
• 外部样式写成：my-button::part(icon) { color: var(--icon-color); }，仍建议用变量承接，保持主题统一
• 兼容性注意：::part() 在 Safari 17.4+、Chrome 95+、Firefox 119+ 支持；微信小程序需基础库 ≥ 2.28.0
• 不可嵌套：my-button::part(icon)::before 无效；也不能用 !important 覆盖 shadow 内已设的内联 style

真正难的不是写对变量名，而是厘清“谁声明、谁继承、谁消费”三层关系。变量一旦脱离宿主这个锚点，就变成不可追溯的魔法字符串——调试时看不到来源，换主题时不敢动，协作时容易冲突。把变量声明收束到宿主标签上，是最小可行、最易维护的约束。