:host 只能作用于宿主元素自身，必须写在 shadow root 内的 style 或 CSSStyleSheet 中，且依赖 attachShadow 和 open 模式；其选择器匹配宿主状态，不监听 class 变化，需配合 display 设置、CSS 变量及继承控制布局与主题。
:host 只能作用于自定义元素自身（即宿主元素），不能穿透到 shadow DOM 内部子节点，也不能被外部样式覆盖——它不是“让外部样式进来”的通道，而是“从组件内部控制自己”的唯一 CSS 入口。
为什么 :host 写了却没生效
常见原因不是语法错，而是位置和上下文不对：
-
:host必须写在 shadow root 内部的<style>或CSSStyleSheet中，写在全局<style>或外链 CSS 里完全无效 - 如果组件还没 attachShadow，或
shadowRoot是closed模式，:host规则根本不会解析 -
:host(.active)这类带类名的选择器，依赖宿主元素实际有该 class —— 它不会自动监听 class 变化，得靠 JS 手动同步 - 使用
adoptedStyleSheets时，:host规则必须出现在注入的CSSStyleSheet字符串里，不能靠innerHTML拼接后动态插入<style>
:host 和 :host-context() 的关键区别
:host 看的是宿主元素自身状态；:host-context() 看的是宿主在 light DOM 中的祖先环境：
-
:host([disabled])匹配<my-button disabled>—— 属性在宿主上 -
:host-context(.dark-mode)匹配宿主父级有class="dark-mode"的情况，比如<div class="dark-mode"><my-button></div> -
:host-context不支持复杂选择器（如.dark-mode > section），只接受简单类、id、属性选择器 -
:host-context在 Safari 17.4+ 才稳定，旧版可能静默失效，不建议用于核心样式逻辑
用 :host 控制组件尺寸和显示行为
这是最常被忽略但最实用的场景：宿主默认是 display: inline，不显式设置会破坏布局流：
立即学习“前端免费学习笔记（深入）”；
- 必须写
:host { display: block }或:host { display: inline-flex }，否则子元素 flex 布局会失效 -
:host([size="large"]) { --button-height: 48px }这种配合 CSS 变量的写法，比直接写height: 48px更利于主题继承 - 避免在
:host里写width: 100%—— 宿主宽度由外部容器决定，强行设百分比容易导致嵌套时意外撑满 - 如果组件要响应外部
max-width，应在:host中用max-width: inherit显式继承，而不是依赖默认行为
变量继承和 :host 的配合要点
:host 是声明组件级 CSS 变量的最佳位置，但变量不会自动“向下透传”到 shadow 子元素：
- 在
:host { --primary-color: #007bff }后，子元素必须显式写color: var(--primary-color)才能生效 - 不要指望
div { color: var(--primary-color) }自动继承 —— 如果中间某层写了color: initial或all: unset，继承链就断了 -
:host中定义的变量，对::slotted(*)也有效，但对::part()外部样式无效 —— 后者需靠宿主元素自身定义变量并暴露 - 调试时用
getComputedStyle(hostEl).getPropertyValue('--primary-color')确认变量是否真被设上，比看 DevTools “Styles” 面板更可靠
真正卡住人的从来不是 :host 语法本身，而是它和 shadow root 创建时机、变量作用域、以及外部 DOM 结构之间的隐式耦合——少一个 attachShadow 调用，或漏掉一层 var() 调用，样式就“消失”得毫无痕迹。
