:host-context() 仅接受单个复合选择器（如 body.dark-theme）作为参数，不支持选择器列表（如 article, aside）或复杂选择器（如 main article），错误用法会导致样式失效。

:host-context() 仅接受单个复合选择器（如 `body.dark-theme`）作为参数，不支持选择器列表（如 `article, aside`）或复杂选择器（如 `main article`），错误用法会导致样式失效。

在 Web Components 的 Shadow DOM 样式封装中，:host-context() 是一个关键伪类函数，用于根据宿主元素（custom element）在外部 DOM 中的祖先上下文动态应用样式。但其参数语法常被误解——许多开发者误以为它支持类似 CSS 选择器列表或后代选择器的写法（如 :host-context(article, aside) 或 :host-context(main article)），实际上这违反了 CSS 规范，将导致样式完全不生效。

✅ 正确语法：仅支持

根据 CSS Selectors Level 4 规范 及已修正的 MDN 文档，:host-context() 的括号内必须是一个且仅一个复合选择器（），即由一个类型选择器、类选择器、ID 选择器、属性选择器或伪类选择器以连缀方式组合而成（无空格、无逗号），例如：

/* ✅ 合法：单一复合选择器 */
:host-context(body)           { color: blue; }
:host-context(.dark-theme)    { background: #111; }
:host-context([data-mode="compact"]) { padding: 4px; }
:host-context(body.dark-theme) { color: white; } /* 类 + 类，合法 */
:host-context(h1:focus)       { text-decoration: underline; }

❌ 常见错误及原因

错误写法	问题类型	说明
:host-context(article, aside)	选择器列表（selector list）	逗号分隔表示“或”关系，但 :host-context() 不接受选择器列表，解析失败
:host-context(main article)	复杂选择器（complex selector）	包含空格的后代选择器属于 ，超出函数参数允许范围
:host-context(.sidebar > .header)	组合选择器（combinator）	>、+、~ 等组合符使整个表达式升格为复杂选择器，非法

? 验证提示：浏览器开发者工具中若看到该规则被标记为“invalid”或直接灰掉，大概率是参数语法违规。

✅ 实用示例：基于主题与结构的条件样式

假设你开发了一个 自定义元素，并希望在不同场景下差异化渲染：

立即学习“前端免费学习笔记（深入）”；

<!-- 外部 DOM -->
<body class="light-theme">
  <main>
    <my-card>默认主题</my-card>
  </main>
</body>

<body class="dark-theme">
  <aside>
    <my-card>暗色侧边栏</my-card>
  </aside>
</body>

在 的 shadow DOM 样式中可这样编写：

/* ✅ 正确：依据 body 类名切换主题 */
:host-context(body.light-theme) {
  --card-bg: #fff;
  --card-text: #333;
}

:host-context(body.dark-theme) {
  --card-bg: #222;
  --card-text: #eee;
}

/* ✅ 正确：依据最近祖先的 data 属性 */
:host-context([data-section="featured"]) {
  border: 2px solid gold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* 应用于 shadow 内部元素 */
::slotted(*) {
  color: var(--card-text);
}

⚠️ 注意事项与最佳实践

• 不支持嵌套或逻辑组合：无法使用 :host-context(.a.b) 表示“同时具备 a 和 b 类”，而应写作 :host-context(.a.b)（这是合法的复合选择器，等价于 .a.b）；但 :host-context(.a, .b) 无效。
• 作用域严格限定于祖先链：:host-context() 匹配的是宿主元素自身及其在 light DOM 中的任意祖先元素，不匹配兄弟或后代元素。
• 性能友好：由于仅检查祖先路径，而非全 DOM 遍历，实际运行开销较低。
• 兼容性提醒：Chrome 63+、Firefox 63+、Safari 15.4+ 支持；Edge 基于 Chromium 后亦支持。旧版 Safari 需谨慎测试。

总结

:host-context() 是 Shadow DOM 中实现“上下文感知样式”的有力工具，但其威力的前提是严格遵守 CSS 选择器语法层级。牢记核心原则：括号内只能是一个 —— 无空格、无逗号、无组合符。摒弃“看起来像 CSS 选择器就能用”的直觉，转而依据规范验证结构，即可避免样式静默失效，构建健壮、可维护的 Web Components 样式系统。