CSS变量能“穿透”Shadow DOM实为继承机制天然跨边界，必须定义在宿主或其直系祖先上并带fallback；:host需中转变量且禁用fallback以防递归；iOS Safari 16.4前存在WebKit引擎bug导致读取失败。
CSS变量（--x）能在Web Components中“穿透”Shadow DOM，不是因为浏览器开了后门，而是它根本没走“穿透”这条路——它靠的是继承链自然向上查找，而这个查找过程天然跨过Shadow boundary。
继承链在宿主处终止，不是bug是设计
浏览器计算var(--color)时，会从当前元素开始，沿DOM树**向上逐个检查祖先节点是否显式声明了--color**，直到找到第一个匹配项为止。这个查找过程在宿主元素（比如或。所以：
-
body { --color: red; }完全无效——body不是宿主的祖先 -
:root { --color: blue; }也无效——:root不在宿主的祖先链上 - 只有
my-button.dark { --color: green; }才真正起作用
为什么var(--x)不带fallback就静默失效
没写fallback不是语法错误，但会导致样式计算退回到属性初始值，结果往往和预期严重不符：
-
color: var(--text-color);→ 未定义时取inherit，最终可能是黑色（甚至UA蓝色） -
background-color: var(--bg);→ 未定义时取transparent，而不是白色 -
border-color: var(--border);→ 未定义时变成currentcolor，可能意外变黑
所有var()调用必须带静态fallback：var(--bg, #fff)，否则就是把样式控制权交给了浏览器默认行为。
:host里转发变量的正确写法
:host是唯一能“接住”外部变量并向下传递的入口，但它本身不自动继承。你在shadow内部
:host {
--bg: var(--bg);
}
这句看似多余，实则关键。它把外部传来的--bg复制进:host的作用域，供内部子元素安全使用。但极易踩坑：
- ❌
:host { --bg: var(--bg, #fff); }→ fallback触发无限递归，Chrome/Firefox可能卡死 - ❌
:host { all: unset; }→ 清空所有CSS变量，var()直接回退fallback - ✅
:host { --bg: var(--bg); }+ 子元素用background-color: var(--bg, #fff);
iOS Safari 16.4之前存在引擎级bug
哪怕你写法完全正确，在iOS Safari 16.4之前的版本里，var(--x)仍可能返回undefined。这不是代码问题，是WebKit缺陷：变量已挂在宿主上，但shadow内部读不到。DevTools里看不出异常，也不报错，最容易当成自己写错了反复排查。
检测方式：getComputedStyle(host).getPropertyValue('--x')返回空字符串，且window.CSS存在，基本可锁定是此bug。需要UA检测+JS降级（如el.style.color = 'red'）或adoptedStyleSheets兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
