:host伪类仅在shadow dom内部中有效，外部css中使用会被浏览器静默忽略；必须通过attachshadow({mode:"open"})创建并注入样式，且:host()需带合法参数如:host(.primary)或:host([disabled])。
:host 伪类只能在 Shadow DOM 内部使用
直接在外部 CSS 文件或 <style></style> 标签里写 :host { display: block; } 是无效的，浏览器会完全忽略。这个伪类只被 Shadow DOM 的 shadowRoot 内部的样式表识别 —— 它不是给“宿主元素”加样式的通用入口，而是专为组件封装设计的上下文限定选择器。
- 必须把
:host放进组件内部创建的<style></style>中（比如通过document.createElement("style")插入到shadowRoot） - 不能用在 light DOM 的全局样式中，哪怕选择器看起来匹配（如
my-button:host）也不合法 - 若组件使用
mode: "closed"，shadowRoot不可访问，也就无法注入含:host的样式 —— 开发时请固定用"open"
:host() 函数必须带参数，空括号不生效
:host() 是函数式语法，不是可选参数的简写。写成 :host() 或 :host( )（空格）都会让整条规则失效，且浏览器不会报错，只会静默跳过。
- 正确写法示例：
:host(.primary)、:host([disabled])、:host([size="large"]) - 支持复合选择器：
:host(.btn[variant="outline"])，但注意属性值需严格匹配（含引号） - 不能在
:host()外再套其他上下文，例如section :host(.card)在 Shadow DOM 内部是非法的
:host 后面跟子选择器时，作用域仍限于 shadowRoot 内部
像 :host .header 这样的写法，看上去像“宿主元素下的 .header”，但它实际匹配的是：宿主元素自身（满足 :host 条件）+ 其 Shadow DOM 内部的后代节点 .header。它不会穿透到 slot 投影进来的内容里。
- 投影内容（light DOM 子节点）需用
::slotted(.header)控制，而非:host .header -
:host > .header只匹配 shadowRoot 直接子元素，不包括<slot></slot>分发后的位置 - 若想同时控制宿主和其 slot 内容，得组合使用：
:host+::slotted(*)+::part(xxx)（后者需组件内显式标记part）
继承性样式会从宿主“漏入”Shadow DOM，但 :host 本身不负责继承
宿主元素上定义的 font-size、color、line-height 等可继承属性，会自然向下影响 Shadow DOM 内部未显式重置的子元素 —— 这不是 :host 的功劳，而是 CSS 继承机制本身的行为。
-
:host只控制宿主自身的样式，不开启/关闭继承 - 若想阻断继承（比如让组件内部字体强制独立），需在 shadowRoot 的
<style></style>中对根节点或具体元素显式重置：* { font-size: inherit; }或:host { font-size: 16px; } - 慎用
:host { all: initial; }：它会清掉所有继承和默认值，包括display、position等关键布局属性，极易导致渲染异常
真正容易被忽略的是：:host 规则的优先级与外部同名规则冲突时，由层叠顺序决定，而不是“内部一定更高”。如果你在外部写了 my-button { display: inline-flex; }，又在 shadowRoot 里写了 :host { display: block; }，最终表现取决于哪条规则更具体、是否带 !important，以及加载顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
