CSS变量是唯一能安全跨Shadow DOM边界的样式机制，但必须挂载到宿主元素上而非:root，因Shadow DOM边界会截断继承链，变量需通过:host接收并应用，否则静默失效。
CSS 变量是唯一能安全跨 Shadow DOM 边界的样式机制，但“全局主题”不能真写在 :root 里——它必须挂载到每个宿主元素上，否则 shadow 内部读不到。
为什么 var(--theme-color) 能用，但 :root { --theme-color: red } 在组件里常失效
Shadow DOM 的继承链会被影子边界截断：外部 :root 或 body 声明的变量，不会自动流入 shadow tree。浏览器只沿 DOM 树向上查找，而 shadow root 是继承链的“终点站”，除非变量就设在宿主元素自身上。
- ✅ 正确方式：
<my-button style="--theme-color: #28a745;"></my-button>或my-button { --theme-color: #28a745; } - ❌ 常见错误：
body { --theme-color: red; }→ shadow 内var(--theme-color)回退到 fallback，不报错也不警告 - 小程序（如 Vant Weapp）中更严格：必须写在组件标签 class 上，
<van-button class="theme-dark">+.theme-dark { --btn-bg: #333; }才生效
:host 是主题落地的关键位置
组件内部的 <style> 必须用 :host 接收变量，并把它转为实际样式；否则变量只是挂在那儿，没人用。
-
:host只能在 shadow root 的<style>中写，不能放外部 CSS 文件 - 示例（在组件 shadow 内）：
:host { --button-padding: 8px 16px; } button { padding: var(--button-padding); background: var(--button-bg, #007bff); } - 支持状态响应：
:host([size="large"]) { --button-padding: 12px 24px; }，无需 JS 切 class
批量应用主题时，别依赖“一次设置全生效”
所谓“全局主题”，其实是同一组变量在多个宿主元素上的重复声明。没有魔法，只有显式赋值。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案：给所有目标组件加统一 class，再用属性选择器批量设变量，例如：
.theme-modern my-button, .theme-modern my-card { --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.1); } - JS 动态方案：
document.querySelectorAll('my-button, my-card').forEach(el => el.style.setProperty('--radius', '8px')) - 注意：变量不继承进
<slot>内容——传入的<p>不会自动拿到--text-color，需使用者自己加 class 或透传属性
真正容易被忽略的点是：变量名没约定、没 fallback、没挂对位置。一个拼错的 --btn-bk-color 和一个漏掉的 var(--btn-bk-color, #007bff)，会让整个主题在某个组件里静默失效，DevTools 还查不出错。调试时右键组件 → “Show inherited CSS properties”，直接看变量是否出现在继承链上，比猜快得多。
