:host必须写在Shadow DOM内部<style>中，外部CSS、<head>样式或内联style均无效；括号内须为合法选择器如:host([disabled])，空括号或非法写法被静默忽略；mode需为'open'且须动态创建<style>注入shadowRoot。
:host 必须写在 Shadow DOM 内部的 <style> 里，外部样式表、<head> 中的 <style>，甚至宿主元素上的 style 属性，全部无效——浏览器不报错，也不警告，直接静默忽略整条规则。
为什么 :host 不生效？
常见错误现象：写了 :host { display: block } 却没效果；或用 :host() 括号里填了非法内容（比如 :host("primary") 或空括号），结果样式完全不应用。
-
:host只能在 Shadow DOM 的<style>节点中使用，不能靠外部 CSS 注入 -
:host()括号内必须是合法选择器：支持[disabled]、.primary、#my-btn，但不支持字符串字面量、函数调用式写法 -
mode: "closed"时shadowRoot不可访问，根本没法注入<style>—— 开发阶段请固定用"open" - 别用
shadow.innerHTML = "<style>...</style>"，多数浏览器会忽略其中的样式内容
::slotted() 和 :host > .child 的作用边界在哪？
:host > .child 只匹配 Shadow DOM 根节点下的直接子元素，不会匹配 <slot> 分发后的位置；而 ::slotted(.header) 才真正控制投影进来的 light DOM 内容。
-
:host .header是“宿主满足 :host 条件，且其 Shadow DOM 内部有后代 .header”，它不穿透<slot> -
::slotted(*)只能设置可继承属性（如color、font-family），不能设margin、display、width - 想同时控制宿主 + slot 内容 + 内部节点，得组合：
:host+::slotted(*)+::part(xxx)（后者需组件内部显式标记part="xxx"）
如何让外部 CSS 影响 Shadow DOM 内部？
外部 CSS 默认完全不参与 Shadow DOM 的样式计算——不是权重低，是浏览器根本“不看”。想穿透，只有两条路：组件作者主动暴露，或 JS 动态注入。
立即学习“前端免费学习笔记（深入）”；
- 用
::part(foo)前，必须确保组件内部元素带part="foo"属性；没加就无效，且不报错 -
::part不支持嵌套写法（如::part(foo)::part(bar)非法），也不管插槽内容 - 想复用 CSS 文件（比如 Tailwind），得用
adoptedStyleSheets：创建CSSStyleSheet实例，fetch后replace()，再赋给shadowRoot.adoptedStyleSheets - Tailwind 用户注意：
content配置必须覆盖 Shadow DOM 模板路径，动态拼接类名要进safelist，构建产物路径必须 public 可访问
最易被忽略的一点：可继承属性（color、font-family）默认并不从宿主继承到 Shadow DOM 内部，必须显式写 :host { color: inherit; font-family: inherit; } 才行。
