:host 必须写在 shadowroot 内的 中，全局或 light dom 中的 :host 规则会被浏览器静默忽略；仅在 shadow dom 上下文中生效，且需用 open 模式、手动注入 style 元素。
:host 必须写在 shadowRoot 内部的 <style></style> 里
浏览器会静默忽略所有写在全局 <style></style>、外链 CSS 或 light DOM 中的 :host 规则，哪怕语法完全正确。它只在 Shadow DOM 上下文中被解析。
正确做法是：调用 this.attachShadow({ mode: 'open' }) 后，手动创建 <style></style> 并 appendChild 到 shadowRoot：
const shadow = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
:host { display: block; }
:host([size="large"]) { font-size: 1.25rem; }
`;
shadow.appendChild(style);
-
mode: 'closed'会导致shadowRoot不可访问，无法注入样式 —— 开发阶段请固定用'open' - 别用
shadow.innerHTML = '<style>...</style>'，多数浏览器会跳过其中的:host规则 -
<link rel="stylesheet">在 Shadow DOM 中不生效，除非配合adoptedStyleSheets（需额外管理）
:host() 括号里必须是合法选择器，空括号或字符串参数都无效
:host() 不是函数调用，而是伪类接收一个完整的选择器作为参数。写成 :host()、:host("primary") 或 :host(primary) 全部被浏览器跳过，且无任何提示。
真正有效的写法只有这些：
-
:host([disabled])—— 匹配宿主有disabled布尔属性 -
:host([size="large"])—— 属性值必须字面量完全一致（含大小写、引号） -
:host(.primary)—— 匹配宿主class属性中包含primary -
:host(.btn[variant="outline"])—— 支持复合选择器，但不能带空格或复杂层级
注意：:host .header 匹配的是 shadowRoot 内部的 .header，不是 light DOM 中 slot 投影的内容；想控制 slot 内容得用 ::slotted(.header)。
宿主 class 或属性变化后，:host(.xxx) 不会自动响应
:host(.active) 只在样式计算时检查宿主当前真实存在的 class 值。JS 执行 this.classList.add('active') 后，样式不会“立刻生效”——它依赖浏览器完成 DOM 属性更新 + 样式重计算周期。
- 不要在
constructor里操作 class，此时shadowRoot还没 attach，:host根本没机会匹配 - 推荐在
connectedCallback或attributeChangedCallback中同步状态，例如：this.toggleAttribute('loading')→ 对应:host([loading]) - 避免靠 JS 强制重排触发样式更新，应确保 DOM 状态与选择器条件严格对齐
用 :host 控制尺寸和继承行为比你想的更关键
宿主元素默认是 display: inline，这会让内部 flex / grid 布局失效，是最常被忽略的布局断裂点。
- 必须显式设置
:host { display: block }或:host { display: inline-flex } - 避免
:host { width: 100% }—— 宿主宽度由外部容器决定，硬设百分比容易导致嵌套时意外撑满 - 需要响应外部
max-width？写:host { max-width: inherit }，而不是依赖默认行为 - 用
:host([size="large"]) { --height: 48px }配合var(--height)，比直接写height: 48px更利于主题继承和子组件复用
真正难的不是写对 :host，而是理解它只控制宿主自身、不穿透、不监听、不继承 —— 所有“应该自动发生”的事，都得你亲手对齐 DOM 状态和 CSS 条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
