应始终用 :root 而非 html 声明 CSS 自定义属性，因其语义明确、保障全局作用域且兼容 SVG/XML 子文档；:host 仅在 Shadow DOM 内有效，用于样式隔离下的宿主节点匹配。

什么时候该用 :root 而不是 html

:root 匹配文档的根元素，在 HTML 中确实是 html 元素，但它真正价值在于「语义明确 + CSS 变量作用域保障」。很多开发者直接写 html { --color-primary: #007bff; }，看似等价，但一旦页面混入 SVG 或 XML 子文档（比如内联 里嵌了 ），html 选择器就失效了，而 :root 始终指向当前文档的根——这是规范定义的行为。

更关键的是，CSS 自定义属性（--xxx）只有在 :root 下声明，才能确保全局可继承、被所有后代元素读取。浏览器对 html 上声明变量的支持虽普遍，但属于“碰巧可行”，不是标准保证。

• 始终用 :root { --spacing-xs: 4px; } 声明全局变量，别用 html
• 若需为不同主题切换变量，直接覆盖 :root 下的值，例如 body.dark :root { --bg: #1a1a1a; }
• :root 的优先级和 html 相同（都是单标签选择器），不存在“更高权重”这种误解

:host 只在 Shadow DOM 里生效，且不能单独使用

:host 不是通用选择器，它只存在于 Web Components 的 Shadow DOM 内部样式中，用于选中当前自定义元素的宿主节点（即那个 标签本身）。一个常见错误是把它当普通类名写在全局 CSS 里：:host { color: red; } —— 这段代码在 外或非 Shadow DOM 环境中完全无效，浏览器会静默忽略。

另一个易错点是误以为 :host 能直接选中子元素。它只能匹配宿主自身，想选宿主内的子节点，必须组合使用：

• 要给宿主加基础样式：:host { display: inline-block; }
• 要响应宿主上的属性（如 ）：:host([required]) { border: 2px solid #e00; }
• 要影响宿主内部的 slot 内容：:host ::slotted(*) { font-weight: bold; }（注意双冒号）
• 不能写 :host div 来选子 div，那会匹配宿主外部的 div —— 因为 Shadow DOM 的样式隔离机制下，外部选择器无法穿透

:host 与 :root 在 scoped 场景下的协作模式

在构建可复用组件时，常需要「全局配置 + 局部覆盖」：比如整个应用用 :root 定义一套间距系统，而某个按钮组件在 Shadow DOM 里想基于这套系统微调自身内边距。这时不能在 :host 里重新定义 --spacing-sm，而应读取并叠加：

:host {
  padding: calc(var(--spacing-sm, 8px) * 1.2) var(--spacing-md, 12px);
}

这种写法依赖两个事实：一是 var() 函数会在宿主元素上逐层向上查找变量（包括 :root）；二是 :host 的样式优先级高于 :root 中同名变量的声明位置（因为它是更具体的宿主样式规则）。

• 避免在 :host 中重复声明全局变量，会造成维护断裂
• 若组件需支持主题切换，用 :host-context(.theme-dark) 比硬编码颜色更健壮
• :host 不支持伪类链式调用如 :host:hover:active，必须拆成两条规则

调试时看不到 :host 样式？检查这三处

开发者工具里查不到 :host 生效的样式，大概率不是语法错，而是环境没到位。三个最常漏掉的点：

• 没调用 attachShadow({ mode: 'open' }) —— mode: 'closed' 时 DevTools 根本不显示 Shadow Root 内的样式面板
• 样式写在外部 CSS 文件里，而非组件 标签或 adoptedStyleSheets 中 —— :host 只在 Shadow DOM 的样式表内解析
• 用了单冒号写法 :host(.class) 但浏览器版本低于 Chrome 73 / Firefox 69 —— 旧版只认双冒号 ::host(.class)（虽然现在都统一支持单冒号了，但遗留项目仍可能踩坑）

真遇到变量不生效，直接在控制台执行 getComputedStyle(document.querySelector('my-component')).getPropertyValue('--my-var')，比看样式面板更可靠。