CSS变量在Shadow DOM中解析为空是因继承链断裂，:root不在宿主元素父级路径上；必须用:host显式声明变量才能穿透，且需避免all: initial等截断继承。
为什么var(--color)在Shadow DOM里解析为空
不是浏览器不支持，是变量根本没进继承链。CSS变量靠继承传递，而:root不在宿主元素的父级路径上——<my-button></my-button>的父级是它自己（即shadowRoot.host），不是。所以哪怕你在index.css里写了:root { --color: red; }，内部color: var(--color)也会静默回退到初始值，DevTools里显示“unresolved”。
必须用:host显式声明变量才能穿透
:host是唯一可靠入口，它把变量“挂”在宿主元素上，子元素自然继承。别指望自动转发，得手动写：
/* 写在组件内部的 <style> 里，不是 document.head */
:host {
--primary: #007bff;
--text-color: var(--text-color, #333); /* 带 fallback 更安全 */
}- 外部可通过
<my-button style="--primary: #28a745"></my-button>动态覆盖，内部立刻响应 - 不要在
:host里写all: initial或all: unset，这会切断所有继承 - 避免
:host { color: var(--primary); }这类写法——这不是变量注入，只是样式应用
iOS Safari 16.4之前存在继承bug
哪怕:host里声明了--color，在iOS Safari 16.4以下版本中，Shadow DOM内部仍读不到。这是引擎级限制，不是写法问题。检测方式：
getComputedStyle(document.createElement('div')).getPropertyValue('--test')返回空字符串不等于不支持，要结合window.CSS判断。若需兼容，得降级为JS设置element.style.color或用adoptedStyleSheets配合内联变量声明。
立即学习“前端免费学习笔记（深入）”；
调试时怎么看变量是否真正生效
别只盯Computed面板里的最终颜色值——那可能是继承来的默认值。正确做法：
- 在DevTools Elements面板中右键宿主元素 → “Show inherited CSS properties”
- 确认
--primary是否出现在列表里，且值非inherit或空 - 鼠标悬停在
var(--primary)上，看提示是否为“invalid”或“unresolved” - 拼错名、作用域错位、被
all: initial截断，都会直接回退，不报错也不警告
最易忽略的是：变量必须在使用前声明，且不能被中间节点重置；:host不是继承起点，它是显式承接点——不写，就不传。
