:host伪类仅在Shadow DOM内部样式表中生效，必须通过attachShadow创建open模式shadowRoot并动态注入含:host的style元素；:host()括号内须为合法CSS选择器，控制投影内容应使用::slotted()而非:host后代选择器。
:host伪类为什么在普通
因为:host不是通用选择器，它只在Shadow DOM的内部样式表中被识别。你在
里写，或者在外部CSS文件中声明，浏览器会直接忽略整条规则——不报错、不警告、不生效，就像那行代码不存在一样。常见错误现象包括：
- 自定义元素
上写了:host { background: blue; }，但背景色始终不变 - 用DevTools检查该元素，Styles面板里根本看不到这条:host规则
- 误以为是优先级问题，疯狂加!important或提高选择器 specificity，结果依然无效
:host必须配合attachShadow({mode: "open"})使用
要让:host生效，必须满足两个硬性条件：创建Shadow DOM，且把含:host的
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
element.attachShadow({mode: "open"})创建shadowRoot（不能用"closed"，否则无法注入样式） - 动态创建
style元素，设置textContent为含:host的CSS，再shadowRoot.appendChild(style) - 不要用
shadowRoot.innerHTML = '<style>...</style>'——这会让