css变量是shadow dom中唯一原生支持的安全样式穿透机制，因其求值延迟特性可沿继承链跨影子边界查找；需在宿主或祖先声明，配合fallback并注意兼容性与命名规范。
CSS 变量是 Shadow DOM 中唯一被原生支持的、安全可控的样式穿透机制 —— 它不破坏封装性，也不依赖 polyfill 或 hack。
为什么 var(--color) 能穿透而普通选择器不能
Shadow DOM 的样式隔离是硬性边界：外部 CSS 无法通过 .inner-button 或 button 选中内部节点。但 var(--color) 是一个“求值延迟”的引用，浏览器在计算最终样式时，会沿着继承链向上查找变量定义，从 shadow host 开始，一直查到 document 根，这个过程天然跨过影子边界。
- 变量必须在宿主元素（如
<van-button></van-button>）或其祖先上声明，不能只写在全局:root里（小程序中常见失效原因） - 变量名需提前约定，组件内部用
var(--button-bg-color, #007bff)提供 fallback，避免未定义时样式崩塌 - 不支持在
@keyframes或@media内部动态读取变量值（部分旧版 Safari 有 bug）
exportparts + ::part() 是比 CSS 变量更细粒度的穿透方式
当你要控制按钮内的图标颜色、禁用态文字透明度、或输入框的 placeholder 样式，而组件又没暴露对应变量时，exportparts 就是解法。它不是替代 CSS 变量，而是补位。
- 组件内部需显式标记：
<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
小程序（Vant Weapp）里设置变量的实际位置很关键
很多人照着文档写 .my-btn { --btn-color: red; } 却没生效，问题往往出在作用域层级上。
- 单个组件定制：变量必须设在组件标签自身上，
<van-button class="my-btn"></van-button>→.my-btn才对；写在父<view></view>上无效 - 动态 style 绑定要拼接完整字符串：
style="{{ 'color: ' + textColor + '; --button-border-radius: ' + radius + 'px;' }}"，漏掉分号或单位会静默失败 - 全局主题写在
app.wxss里时，必须用page或body作选择器前缀（小程序不支持:root），否则变量不会继承到组件 - 调试技巧：在开发者工具 Elements 面板中，右键组件 → “Show inherited CSS properties”，能直接看到当前生效的变量值
别忽略 fallback 和降级逻辑
CSS 变量不是银弹。iOS 14.5 以下、微信旧版基础库、某些国产浏览器 WebView 仍不支持，此时若组件完全依赖 var(--x)，就会显示默认色甚至无样式。
- 始终提供 fallback：
color: var(--text-color, #333);，而不是color: var(--text-color); - 对关键视觉属性（如主色、字体大小）做双重声明：先写降级值，再覆盖变量，例如
font-size: 14px; font-size: var(--font-size-md, 14px); - 服务端可检测 UA，对不支持的客户端返回预编译的静态主题 CSS，而非依赖运行时变量注入
真正难的不是写对 var()，而是让所有组件都遵循同一套变量命名规范、并在文档里明确哪些变量可改、哪些改了会引发连锁反应 —— 这需要设计系统层面的约束，而不是某个函数调用就能解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
