::slotted仅匹配直接插入slot的顶层节点，不穿透嵌套结构，须写在shadow root内style中且仅支持简单选择器；:host作用于组件自身，::part需内部显式标记，三者定位与职责分明。
为什么 ::slotted 无法选中深层子元素
::slotted 只匹配直接插入到 <slot></slot> 中的**顶层节点**，不穿透、不递归。比如传入 <div><p>hello</p></div>，::slotted(div) 能命中，但 ::slotted(p) 完全无效——p 并不在插槽“表面”，它被包裹在 div 里了。
- 它只作用于“被投射进来”的那一层 DOM，不是 Shadow DOM 内部渲染后的结构
- 不能用
::slotted(div p)或::slotted(.class > span)做后代选择，语法本身不支持 - 如果需要样式穿透到底层，得靠组件内部自己定义，或让使用者把 class 放到最外层节点上
::slotted 不生效的常见原因
最常遇到的是：样式写在 Shadow DOM 外（如全局 CSS），或者用了不被支持的选择器。浏览器对 ::slotted 的实现严格遵循规范，错一点就静默失效。
- 必须写在组件的 shadow root 内的
<style></style>里，外部<link>或全局<style></style>里的规则完全不触发 - 只接受简单选择器：
::slotted(.btn)✅，::slotted([disabled])✅，但::slotted(.btn:hover)❌（伪类不允许）、::slotted(*:nth-child(1))❌（复杂结构不支持） - 若插槽内容是文本节点（比如纯字符串），
::slotted(span)这类选择器自然不会匹配——它根本不是元素节点
和 :host、::part 的关键区别在哪
三者定位完全不同：:host 指当前自定义元素自身；::slotted 指“别人塞进来的顶层内容”；::part 是组件主动暴露给外部定制的内部子节点。
-
:host样式控制组件外壳，比如:host([size="large"]) { padding: 1em; } -
::slotted控制传入内容的表层样式，比如::slotted(button) { margin-right: 0.5em; } -
::part需要组件内部用part="icon"显式标记，外部才能写my-button::part(icon) { color: blue; }，它不依赖插槽机制 - 三者优先级独立，没有继承关系；
::slotted的样式权重要低于组件内部对同元素的直接声明
实际能做什么？别指望它干的事
::slotted 是轻量级内容修饰工具，适合做边距、颜色、基础尺寸等“非侵入式”调整。它不是 CSS-in-JS，也不替代组件 API 设计。
立即学习“前端免费学习笔记（深入）”；
- 可以统一设置所有传入的
button的font-weight或cursor - 可以给
::slotted(img)加个max-width: 100%防溢出 - 但不能靠它隐藏某个特定子组件（比如
::slotted(.ad-banner) { display: none; }属于滥用，应由业务逻辑控制是否传入） - 也不能用它触发动画或修改
position等可能破坏布局的行为——插槽内容本意是“交由父级掌控”，强行接管容易引发意外交互
真正难的不是写对选择器，而是想清楚：这个样式责任，到底该由谁承担——是插槽内容的提供方，还是接收方？一旦边界模糊，::slotted 就会变成甩锅接口。
