CSS自定义属性穿透Shadow DOM靠继承链而非选择器匹配，必须定义在宿主元素或其直系祖先上并带fallback，否则var()回退到初始值。
CSS 自定义属性（--xxx）能“穿透”Shadow DOM，不是靠选择器匹配，而是靠继承链自然透入——但必须满足两个硬性条件，否则var(--color)会回退到初始值，而不是你期望的颜色。
为什么var(--primary)在 shadow 内显示为 transparent 或无效？
根本原因不是变量没传过去，而是继承链断了。浏览器只沿 DOM 树向上查找--primary定义，且仅查到宿主元素（即<my-button>）及其直系祖先为止。常见失效场景：
-
body { --primary: #007bff; }——body不是宿主的祖先（宿主是<my-button>，它平级于body），这条规则完全不参与继承计算 -
document.documentElement.style.setProperty('--primary', '#007bff')——:root也不是宿主祖先，无效 - 变量定义在父级 wrapper 元素上，但该 wrapper 没包住宿主，比如：
<div class="theme-dark"></div><my-button></my-button>，此时.theme-dark和<my-button>无祖先关系 - 用了
var(--primary)但没写 fallback，如color: var(--primary);→ 未定义时取color初始值inherit，最终可能变成transparent（尤其在background-color等属性上）
如何正确声明并确保变量透入 shadow root
变量必须设在宿主自身或其**直系祖先**上，并始终带 fallback。推荐做法：
- 直接在宿主元素上设：
<my-button style="--bg: #2c3e50; --text: white;"></my-button> - 或用 class 控制，在宿主上定义：
my-button.dark { --bg: #1a1a1a; --text: #f0f0f0; }，再写<my-button class="dark"></my-button> - 所有使用处必须带 fallback：
background-color: var(--bg, #fff);、color: var(--text, #333); - 避免依赖外部全局样式；如果需统一主题，应在应用入口把变量注入到每个宿主元素，而非
body或:root
::part() 和 var() 别混用：它们解决的是不同问题
::part() 是组件作者主动暴露的样式钩子，用于控制特定内部节点（如<button part="submit">）；而var() 是通用继承机制，适用于颜色、字体、间距等可继承配置。误用典型：
立即学习“前端免费学习笔记（深入）”；
- 写
my-button::part(label) { color: var(--text); }却没在 shadow 内给 label 节点加part="label"→ 样式不生效 - 以为
var()能控制padding或border-radius→ 这些不可继承，必须通过var()+ 显式inherit或组件内 CSS 响应 - 在 shadow 内部写
button { --bg: var(--bg); }再用——多余，var(--bg)本就能直接用，无需中转
调试时最容易忽略的一点
DevTools 的“Computed”面板里，var(--xxx)的计算值**不会显示来源行号**，只显示“inherited from #fff）被应用，第一反应不该是“变量没传”，而应立刻检查：<my-button>元素自身是否真有style或匹配的 class 声明了该变量——因为继承链只到这里为止，再往上查就是白费力气。
