应始终用 :root 而非 html 声明 css 自定义属性，因其语义明确、保障全局作用域且兼容 svg/xml 子文档；:host 仅在 shadow dom 内有效，用于样式隔离下的宿主节点匹配。
什么时候该用 :root 而不是 html
:root 匹配文档的根元素，在 HTML 中确实是 html 元素，但它真正价值在于「语义明确 + CSS 变量作用域保障」。很多开发者直接写 html { --color-primary: #007bff; }，看似等价，但一旦页面混入 SVG 或 XML 子文档（比如内联 <svg></svg> 里嵌了 <foreignobject></foreignobject>），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 内部样式中，用于选中当前自定义元素的宿主节点（即那个 <my-button></my-button> 标签本身）。一个常见错误是把它当普通类名写在全局 CSS 里：:host { color: red; } —— 这段代码在 <style></style> 外或非 Shadow DOM 环境中完全无效，浏览器会静默忽略。
另一个易错点是误以为 :host 能直接选中子元素。它只能匹配宿主自身，想选宿主内的子节点，必须组合使用：
立即学习“前端免费学习笔记（深入）”；
- 要给宿主加基础样式：
:host { display: inline-block; } - 要响应宿主上的属性（如
<my-input required></my-input>）：: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 文件里，而非组件
<style></style>标签或adoptedStyleSheets中 ——:host只在 Shadow DOM 的样式表内解析 - 用了单冒号写法
:host(.class)但浏览器版本低于 Chrome 73 / Firefox 69 —— 旧版只认双冒号::host(.class)（虽然现在都统一支持单冒号了，但遗留项目仍可能踩坑）
真遇到变量不生效，直接在控制台执行 getComputedStyle(document.querySelector('my-component')).getPropertyValue('--my-var')，比看样式面板更可靠。
