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">）上，但宿主没加class="theme-dark"，变量无法继承到 shadow 内部 - 拼错变量名（如
--btn-bg-colorvs--button-bg-color）会导致静默回退到 fallback，无报错提示
-- 变量该设在哪？宿主元素上才真正有效
变量必须显式绑定在宿主元素（即自定义标签本身）上，才能确保 shadow 内部稳定读取。这是最容易被忽略的实操细节。
- ✅ 正确：
<my-card theme="modern" style="--card-radius: 12px; --card-shadow: 0 4px 12px rgba(0,0,0,0.1);"> - ❌ 无效：
<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> 中使用 :host 并结合变量。
-
:host只能在 shadow root 的内联<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
真正难的不是写对变量名，而是厘清“谁声明、谁继承、谁消费”三层关系。变量一旦脱离宿主这个锚点，就变成不可追溯的魔法字符串——调试时看不到来源，换主题时不敢动，协作时容易冲突。把变量声明收束到宿主标签上，是最小可行、最易维护的约束。
