CSS变量必须挂载在宿主元素上才能被Shadow DOM读取，查找链在宿主处终止，需用:host伪类注入并提供fallback，命名应加前缀防冲突。
变量必须挂在宿主元素自身上才能被读取
Shadow DOM 内部的 var(--x) 不是“查找全局变量”，而是沿 DOM 树向上找最近一个声明了 --x 的祖先元素。这个查找链在宿主元素（如 <my-button>）处就终止了——<body>、:root 或外层 <div class="theme-dark"> 都不在该链上，因此无效。
验证方式很简单：getComputedStyle(host).getPropertyValue('--x') 返回空字符串，就说明变量根本没挂上去。
- ✅ 有效：在 HTML 中写
<my-card style="--card-bg: #f0f0f0;"> - ✅ 有效：用外部 CSS 规则直接命中宿主标签，如
my-card[theme="dark"] { --card-bg: #1e1e1e; } - ✅ 有效：JS 动态设置
host.style.setProperty('--card-bg', '#2d2d2d') - ❌ 无效：写
body { --card-bg: #1e1e1e; }或.wrapper > my-card { --card-bg: #1e1e1e; }
:host 是唯一合法的变量接收和转发入口
:host 伪类本身不继承变量，它只是你把变量“落地”到宿主并向下透传的必经通道。所有变量注入逻辑都得写在 shadow 内部的 <style> 中，不能放在 light DOM 或外部 CSS 文件里。
常见错误是试图在 :host 中用 fallback 做兜底转发：:host { --bg: var(--bg, #fff); } —— 这会触发无限递归，Chrome/Firefox 可能卡死。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全写法：
:host { --bg: var(--bg); }（无 fallback），再在子元素中用background-color: var(--bg, #fff); - ✅ 多主题支持：
:host([theme="dark"]) { --bg: #0f172a; }，配合 HTML 属性切换 - ❌ 禁止：
:host { all: initial; }或:host { all: unset; }，这会清空所有继承属性，包括 CSS 变量 - ⚠️ 注意：iOS Safari 16.4 之前存在 WebKit 引擎级 bug，即使变量已正确挂载，shadow 内仍可能读不到
带 fallback 是硬性要求，不是可选项
所有 var() 调用都必须提供 fallback，否则变量未定义时会回退到 CSS 属性的初始值（比如 background-color: initial 是 transparent，不是白色；color: initial 是黑色，但 a 标签仍会显示 UA 蓝色）。
- ✅ 推荐：
color: var(--text-color, #333);、background-color: var(--card-bg, #ffffff); - ✅ 对顽固元素单独重置：
a { color: inherit; }、button { color: inherit; }，因为 UA 样式优先级高于继承 - ❌ 拼错变量名（
--Text-Color≠--text-color）或漏 fallback，都会静默失效，DevTools 显示invalid而非报错
调试时别只看 Computed 面板
DevTools 的 Computed 面板有时会隐藏真实状态。更可靠的方式是右键宿主元素 → “Show inherited CSS properties”，直接查看哪些变量已进入继承链；或者用 JS 手动检查：getComputedStyle(host).getPropertyValue('--x')。
另一个容易忽略的点是命名空间冲突：--bg 这种通用名极易被外部样式覆盖。建议加前缀，比如 --my-card-bg 或 --ui-button-color，尤其在组件库场景下。
