:host-context() 不能匹配祖先 Shadow DOM 内的 class，仅匹配 light DOM 祖先元素（如 body、html 或外层 div）；应将主题 class 设于 light DOM，并配合 CSS 变量实现可靠主题切换。
:host-context() 为什么不能直接匹配祖先的 class？
:host-context() 看起来像能“向上查类名”，但实际它只匹配 包含该 Shadow Root 的宿主元素自身及其所有祖先元素——注意：是“祖先元素”，不是“祖先 Shadow Root 内的元素”。也就是说，如果主题 class（比如 theme-dark）加在 <body> 或某个外层 <div> 上，它能生效；但如果加在另一个 Web Component 的 shadow DOM 内部（比如 <app-shell> 的 shadow 中设置了 theme-light），:host-context(.theme-light) 在子组件里就完全不触发。
正确使用 :host-context() 切换主题的写法
必须把主题 class 放在 light DOM 的祖先链上。典型可靠位置包括：<html>、<body>、或组件直接父级的 light DOM 元素（非 shadow 内）。
- ✅ 推荐：在
<body>上动态切换 class：document.body.classList.toggle('theme-dark', isDark) - ✅ 可行：给自定义组件的外层容器加 class：
<div class="theme-dark"><my-button></my-button></div>，然后在<my-button>的 shadow style 中写:host-context(.theme-dark) { --bg: #333; } - ❌ 无效：在
<my-app>的 shadow DOM 里给一个<div class="theme-dark">加 class，子组件无法通过:host-context(.theme-dark)捕获
:host-context() 和 CSS 自定义属性配合更可靠
纯靠 :host-context() 控制样式容易耦合且难维护，尤其涉及颜色、间距等多变量时。更健壮的做法是用它来设置根级 CSS 变量，再在组件内消费：
:host-context(.theme-dark) {
--color-text: #eee;
--color-bg: #222;
}
:host-context(.theme-light) {
--color-text: #333;
--color-bg: #fff;
}
:host {
color: var(--color-text);
background: var(--color-bg);
}
这样即使后续主题逻辑变复杂（比如加配色系统、用户偏好检测），只需改变量定义，不碰每个组件的样式块。
立即学习“前端免费学习笔记（深入）”；
兼容性与替代方案提醒
:host-context() 在 Safari 中长期不支持（直到 Safari 16.4 才部分支持，且不支持嵌套选择器如 :host-context(.a .b)），Chrome / Firefox 支持较好，但 Edge 基于 Chromium 后已无问题。生产环境若需兼容旧 Safari，应避免依赖它：
- 降级方案：用 JavaScript 监听
bodyclass 变化，手动调用shadowRoot.querySelector('style').textContent = ... - 更推荐：放弃
:host-context()，改用:host([theme="dark"])+ 属性绑定，由父组件显式传入theme属性 - 注意：CSSOM 注入样式或
adoptedStyleSheets是现代替代路径，但需要 JS 主动管理，无法纯 CSS 响应
真正容易被忽略的是：主题切换不是“写个伪类就完事”，它要求明确的 class 落点层级、跨浏览器的兜底策略，以及变量体系的设计边界。没想清楚这三点，光套 :host-context() 很快会卡在 Safari 或嵌套主题场景里。
