:host-context()响应祖先类或属性而非读取外部主题；需确保祖先节点存在对应class/attribute，语法仅支持单个类或属性选择器，配合CSS变量时须在:host中用inherit显式继承并提供fallback。
:host-context() 不是读取外部主题，而是响应祖先节点的类或属性；它只匹配 DOM 结构，不获取变量。写对了却没生效？大概率是祖先没挂 class/attribute，或者语法违规被浏览器静默丢弃。
为什么 :host-context(.dark) 没效果
常见错误不是 CSS 写错了，而是 DOM 结构没对上：
-
:host-context(.dark)要求宿主元素的任意祖先（含）有class="dark"，不是宿主自己有class="dark" -
:host-context([data-theme="dark"])必须确保或<div data-theme="dark"><my-button></my-button></div> - 写成
:host-context(.dark, .high-contrast)或:host-context(main .card)会直接失效——逗号、空格、嵌套选择器都不支持 - 开发者工具里该规则显示为灰色或标记
invalid，就是语法或结构不匹配，不是“没加载”
:host-context() 和 CSS 变量怎么配合才真正换色
单独用 :host-context() 只能切换样式块，真要改颜色、间距、阴影，得靠 CSS 变量承接。关键不在选中，而在变量能否传进来：
- 变量必须声明在宿主元素自身上，比如
<my-button style="--bg: #13c2c2;"></my-button>，不能写在或外层 wrapper 里 - 组件内部要用
var(--bg, #007bff)，fallback 不可省——没 fallback 时计算值为invalid，文字可能直接变黑不可见 -
::host里显式承接：写:host { --bg: inherit; }，否则 Shadow DOM 阻断继承链，inherit是显式打通的唯一可靠方式 - 避免
all: inherit——它会把所有属性都继承，可能覆盖组件内必要的重置样式
和 @media 混用时优先级怎么算
:host-context() 匹配 DOM 状态，@media 匹配设备特征，两者可共存，但顺序和特异性会影响结果：
- 同一选择器下，
@media (prefers-color-scheme: dark) { :host-context([data-theme="dark"]) { ... } }是冗余且易错的——data-theme已足够表达意图，系统暗色模式应由 JS 统一收口到这个属性 -
@media内部的:host-context()是嵌套规则，需同时满足媒体条件 + DOM 条件才生效 - 不要指望
:host-context()自动响应prefers-color-scheme，它不读取系统偏好，只看 HTML 属性或 class
真正难的不是写对 :host-context()，而是确保变量从祖先传下来时没断层——Shadow DOM 天然阻断继承，inherit 必须显式写，而且只能一层层接住，漏一层就 fallback 到初始值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
