:host和::slotted必须写在组件内部style中；:host作用于宿主元素，::slotted仅匹配slot顶层插入内容，均不响应外部CSS；优先级隔离导致!important无效，需用CSS变量或::part穿透。
Web Components中:host和::slotted到底该在哪儿写样式
样式写在组件内部但不生效？大概率是没搞清影子根（shadow root）的样式作用域边界。:host只对当前组件宿主元素生效，::slotted只匹配被<slot></slot>投射进来的外部节点——它俩都不管父页面里直接写的CSS。
-
:host必须写在组件自己的<style></style>里，不能靠外部CSS通过类名覆盖；加:host(.active)才响应外部设置的class -
::slotted(*)只能影响插槽内容的顶层元素，无法深入到子元素内部（比如::slotted(div p)无效） - 如果用
mode: "closed"创建影子根，连JavaScript都拿不到shadowRoot，更别提动态注入样式了
为什么!important在Shadow DOM里有时失效
不是!important失效，而是优先级计算规则变了：影子树内样式和外部样式属于不同作用域，不直接比权重；外部样式根本进不了影子树，自然谈不上被!important压制。
- 外部定义的
.btn { color: red !important }对影子树内的<button></button>完全无效 - 想让外部控制颜色，得暴露CSS自定义属性：
:host { color: var(--btn-color, blue); }，再由外部设style="--btn-color: red" - 用
all: initial重置:host会清掉继承来的font-size等，容易导致文字突然变小，要小心
穿透样式（::part和::theme）的实际兼容性坑
::part是目前最靠谱的样式穿透方案，但Chrome 73+才支持，Firefox 96+，Safari 17.4+——iOS 17.4之前全跪。而::theme压根没进标准，仅实验性存在，别在线上用。
-
<my-button></my-button>内部用<button part="base"></button>，外部才能写my-button::part(base) { border: 2px solid green; } - 多个
part名用空格分隔：part="icon primary"，外部选::part(icon)或::part(primary)都行 - 别指望
::part能穿透到slot内容里——它只认组件自己模板里的元素
用inherit和unset传递样式时的隐性断裂
很多样式属性默认不继承（比如background、border），光靠inherit传不下去；而unset在继承属性上等于inherit，在非继承属性上等于initial，行为不统一。
立即学习“前端免费学习笔记（深入）”；
-
:host { font-family: inherit; }有用，但background-color: inherit基本没用——父容器背景不会透进来 - 想让slot内容响应主题色，得在
:host设color: var(--text-primary)，再让slot内元素用color: inherit - 用
all: revert可以回退到浏览器默认样式，但它会把自定义属性也清掉，慎用
真正难的不是写对某个伪类，而是判断“这个样式到底该由谁负责”：是组件封装者暴露接口，还是使用者强行穿透。一旦混合使用::part、CSS变量和:host，层级关系就很容易绕晕——建议先画个作用域树，再动笔写CSS。
