ShadowDOM变量穿透实现主题定制

本文深入解析了Shadow DOM中CSS变量穿透的关键原理与实战陷阱，强调变量必须显式声明在宿主元素（通过`:host`）而非依赖外部继承，否则90%的主题失效问题由此而生；同时指出`fallback`不是可选项而是防崩底线，调试需借助“inherited properties”而非仅看computed样式——真正考验企业级主题定制能力的，是在多层组件、多主题、多环境协同下，确保每一条变量继承链都精准挂载、命名统一、回退合理，稍有松动，主题便会在无声处悄然失焦。

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

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

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

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

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

仅靠变量只能改 shadow 内部样式；要让主题同时影响组件外框、圆角、边框等宿主自身表现，必须在 shadow 内部的