能，但变量必须声明在宿主元素自身上而非父容器或:root；shadow dom继承链在boundary处截断，需通过:host绑定变量并设合理fallback，否则主题易失焦。

能，但必须把变量声明在宿主元素自身上，而不是父容器或 :root；漏掉这一步，90% 的“穿透失效”问题就已注定。

变量必须挂载到宿主元素，不能靠继承链“捎带”

Shadow DOM 不会自动继承 body 或 page 上的 CSS 变量，继承链在 shadow boundary 处被截断。外部设置的变量只有挂到自定义元素（如 <van-button></van-button>）或其直接 wrapper 元素上，才能被内部 var(--x) 读取。

• ✅ 正确：<van-button class="theme-red" style="--button-bg: #e53935;"></van-button>
• ❌ 无效：<view class="wrapper"><van-button></van-button></view> + .wrapper { --button-bg: red; }
• 小程序中尤其注意：app.wxss 里必须用 page .my-btn 或 body .my-btn 做前缀，否则变量不进入继承链

:host 是控制宿主外观的唯一合法入口

仅靠变量只能改 shadow 内部样式；要让主题同时影响组件外框、圆角、边框等宿主自身表现，必须在 shadow 内部的 <style></style> 中使用 :host，并绑定变量。

• :host 只能在 shadow root 的内联 <style></style> 中写，外部样式表里无效
• 示例：:host { border-radius: var(--button-radius, 4px); background: var(--button-bg); }
• 支持条件响应：:host([size="large"]) { --font-size: 1.25rem; }，无需 JS 切换 class
• 避免写 :host .inner 这类非法选择器——语法错误且静默忽略

fallback 值不是可选项，是防崩底线

未定义变量时，var(--missing) 返回空值，可能导致颜色透明、尺寸为 0、边框消失等不可见但致命的问题。

• 所有 var() 必须带 fallback：color: var(--text-color, #333);、padding: var(--spacing-md, 0.75rem);
• fallback 应该是合理默认值，而非占位符（比如不用 var(--color, initial)）
• 变量名需提前收敛、文档化；拼错名称（如 --btn-bg vs --button-bg）不会报错，只会回退 fallback

调试时别只看 computed，要查“inherited properties”

开发者工具里直接看元素的 computed 样式，常看不到变量实际取值来源——因为它是运行时继承计算的，不是静态声明。

• 右键组件 → “Show inherited CSS properties”，才能看到 --x 是从哪一层 host 继承来的
• 若列表里没有你的变量，说明它根本没挂到正确的宿主节点上
• 小程序中，检查 style 绑定是否漏分号或单位：style="{{ 'color: ' + c + '; --radius: ' + r + 'px;' }}"，缺一个分号就整条失效

真正难的不是写对一行 var(--x)，而是确保整条继承链上每个宿主都按约定挂了变量——企业级定制往往跨多层组件、多套主题、多个构建环境，变量漏挂、重名覆盖、fallback 不一致，这些细节一旦松动，主题就会在某个角落悄悄失焦。