CSS变量在Shadow DOM中显示invalid，根本原因是继承链未正确搭到宿主元素：变量必须声明在:host或其直系祖先上，且需带fallback值；写在body或.wrapper中无效，:host规则须置于shadow内<style>中，避免all: unset清空变量。
Edge 139（基于Chromium 127+）本身完全支持CSS变量继承，问题几乎肯定出在Shadow DOM边界、选择器作用域或变量未被宿主元素声明——不是浏览器bug，而是链路没搭对。
为什么var(--color)在Shadow DOM里显示invalid
Edge 139已全面支持var()，但Shadow DOM的继承只认直接父节点（即自定义元素自身），不向上追溯
- 变量写在
body { --color: red; }里，但宿主元素（如<my-card></my-card>）没加对应class，变量卡在boundary外 -
:host规则没写在shadow内部的<style>中，而是误放在light DOM或全局CSS里 - 宿主元素用了
all: unset或all: initial，把所有--*清空了
如何用:host安全注入变量到Shadow DOM
必须在shadow内部<style>中声明:host规则，并提供fallback值：
<style>
:host {
--text-color: var(--theme-text, #1e293b);
}
:host(.dark) {
--bg: #0f172a;
}
.card-content {
color: var(--text-color);
background-color: var(--bg, #ffffff);
}
</style>
-
:host是唯一能从shadow内影响宿主自身并透出变量的入口 - 必须显式绑定class/attribute，比如
<my-card class="dark">才能触发:host(.dark) - 每个
var(--x, fallback)都得带fallback，否则变量未定义时样式会崩溃（文字变黑/背景透明）
调试时getComputedStyle(host)返回空值怎么办
不是Edge问题，是变量根本没挂到宿主上。执行这三步定位：
Money Knowledge
下载
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
立即学习“前端免费学习笔记（深入）”；
- 在Console里运行
getComputedStyle(document.querySelector('my-card')).getPropertyValue('--text-color')，看是否返回空字符串 - 检查宿主元素是否真有对应class/attribute：
document.querySelector('my-card').className或.hasAttribute('theme') - 打开DevTools → Elements → 选中宿主元素 → Styles面板搜索
--text-color，点开“Defined in”看是否指向:host规则
currentColor比inherit更适合跨Shadow boundary传色
这是常被忽略的关键差异：
-
currentColor能跨boundary，因为它读取的是宿主元素最终计算出的color值 -
inherit在Shadow boundary处中断，不能穿透 - 想让slot内容复用宿主颜色，得这样写：
::host { color: var(--theme-color); } ::slotted(*) { color: currentColor; } - 别在CSS变量里写
--x: inherit，CSS变量不支持继承关键字，会直接失效
真正容易被忽略的是：变量是否生效，和DOM嵌套多深完全无关，只取决于:host有没有被正确命中、有没有显式声明、有没有被all: unset抹掉——Edge 139里，链路一通，var()就稳。
