css变量不支持真正全局穿透，必须显式挂载到宿主元素上；:root或body声明的变量无法流入shadow tree；需用:host控制宿主样式，所有var()必须带fallback，变量名应加前缀并文档化。

能，但“全局主题”这个词容易误导——CSS 变量本身不支持真正意义上的全局穿透，--theme-color 必须显式挂载到每个宿主元素上，否则 shadow 内部读不到。所谓“全局”，其实是批量控制的错觉。

变量必须设在宿主元素上，不能靠 :root 或 body 继承

Shadow DOM 边界会截断继承链，:root 或 body 上声明的变量不会自动流入 shadow tree。很多失效案例都卡在这一步。

• ❌ 错误：在 :root 里写 --primary: #007bff，然后期待所有 <my-button></my-button> 都能用 var(--primary)
• ✅ 正确：给每个组件实例加属性或 class，再用选择器定位宿主：my-button[theme="dark"] { --bg: #1e1e1e; }
• ✅ 更实用：用 JS 批量设置：document.querySelectorAll('my-button').forEach(el => el.style.setProperty('--bg', '#2d2d2d'))

用 :host 配合变量控制宿主自身样式

只改 shadow 内部颜色还不够，按钮整体圆角、边框、尺寸等“容器级”样式也得响应主题。这必须靠 :host，它只能写在 shadowRoot 的 <style></style> 里。

• :host 选中的是 <my-button></my-button> 这个标签本身，不是内部节点
• 在 shadow 内部写：:host { border-radius: var(--button-radius, 4px); background: var(--button-bg); }
• 外部只需更新宿主上的变量，:host 样式就会联动生效
• ⚠️ 注意：:host .inner 是非法写法，:host 后不能跟后代选择器

fallback 值不是可有可无的装饰

var(--color, #000) 中的 #000 是 fallback，不是默认值。一旦变量未定义（拼错名、作用域不对、没挂载），就会静默回退——页面不会报错，但样式可能崩塌。

• 所有 var() 调用都必须带 fallback，尤其颜色、尺寸、阴影这类关键视觉属性
• fallback 应该是合理的设计兜底，比如 var(--text-color, var(--color-default, #333)) 支持多层降级
• 小程序里更敏感：微信基础库对未定义变量的 fallback 处理更严格，漏掉 fallback 容易白屏

动态主题切换时，别直接操作

有人想通过 JS 修改 shadowRoot 内部的 <style></style> 字符串来切主题，这不可靠且难维护。

• 每次修改都要重新解析整段 CSS，性能差，还容易破坏原有规则顺序
• 更好的方式是：把主题变量全放在宿主上，shadow 内部只用 var() 引用
• 切换时只调用 el.style.setProperty('--theme', 'dark')，浏览器自动重绘，零副作用
• 需要批量更新时，用 CSSStyleSheet.replace() 替换外部 theme.css，比操作内联 style 更干净

最常被忽略的一点：变量名一旦暴露，就是组件的公开 API。命名要带前缀（如 --my-button-bg），避免和其它组件冲突；同时得文档化哪些变量可改、哪些改了会破坏布局——否则“灵活定制”很快变成“不敢动”。