能，但变量必须声明在宿主元素自身上而非父容器或:root；Shadow DOM继承链在boundary处截断，需通过:host绑定变量并设合理fallback，否则主题易失焦。
能，但必须把变量声明在宿主元素自身上，而不是父容器或 :root；漏掉这一步，90% 的“穿透失效”问题就已注定。
变量必须挂载到宿主元素，不能靠继承链“捎带”
Shadow DOM 不会自动继承 body 或 page 上的 CSS 变量，继承链在 shadow boundary 处被截断。外部设置的变量只有挂到自定义元素（如 <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> 中使用 :host，并绑定变量。
-
:host只能在 shadow root 的内联<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-bgvs--button-bg）不会报错，只会回退 fallback
调试时别只看 computed，要查“inherited properties”
开发者工具里直接看元素的 computed 样式，常看不到变量实际取值来源——因为它是运行时继承计算的，不是静态声明。
- 右键组件 → “Show inherited CSS properties”，才能看到
--x是从哪一层 host 继承来的 - 若列表里没有你的变量，说明它根本没挂到正确的宿主节点上
- 小程序中，检查
style绑定是否漏分号或单位：style="{{ 'color: ' + c + '; --radius: ' + r + 'px;' }}"，缺一个分号就整条失效
真正难的不是写对一行 var(--x)，而是确保整条继承链上每个宿主都按约定挂了变量——企业级定制往往跨多层组件、多套主题、多个构建环境，变量漏挂、重名覆盖、fallback 不一致，这些细节一旦松动，主题就会在某个角落悄悄失焦。
