CSS变量在Shadow DOM中无法访问，是因为其依赖继承链而非自动穿透；必须在:host或宿主元素上显式声明，:root声明无效，且需避免all: initial截断继承链。
CSS变量在Shadow DOM中无法继承，不是因为没写:root，而是:root根本不在宿主元素的继承链上——入口文件里集中定义:root变量对Shadow DOM完全无效。
为什么:root在入口CSS里声明后Shadow DOM还是读不到
浏览器只把:root匹配到主文档的<html>节点，而Shadow DOM的继承起点是宿主元素（比如<my-card>），<html>不是它的祖先。即使你把theme.css通过<link>引入<head>，里面的:root { --color: red; }也不会自动挂到任意<my-card>上。
- 小程序场景下
:root甚至不被WXSS解析器识别，必须改用page或body前缀 - React/Vue项目若用CSS-in-JS注入样式，
document.head里的:root规则仍无法穿透，除非样式节点插入到宿主元素内部（如shadowRoot.appendChild(styleEl)） - 第三方UI库（如Semi UI v2.59+）虽内置
:host桥接逻辑，但前提是构建时启用了对应样式插件，否则:root定义依旧静默失效
真正有效的“集中定义”方式：用:host替代:root
想让所有组件统一读取同一套主题变量，不能靠全局:root，而要在每个组件的Shadow DOM内部