::slotted()仅样式化slot分发的light DOM顶层元素，不能作用于Shadow DOM内部节点；它必须写在shadow root内style中，只匹配直接子节点，不支持伪类、复合选择器及属性选择器，且优先级低于外部同名样式。
直接说结论：::slotted() 不能样式化 Shadow DOM 内部节点，它只作用于被 <slot></slot> 分发进来的、light DOM 中的**顶层元素**。想改 Shadow DOM 自己的结构？该用 ::part() 或 :host，不是 ::slotted()。
为什么 ::slotted(p) 有时不生效
最常见原因就三个：
-
::slotted()必须写在 shadow root 内的<style></style>里，全局 CSS 或<link>引入的样式完全无效 - 它只匹配 slot 的**直接子节点**：传入
<div><p>hi</p></div>，::slotted(div)可以命中，::slotted(p)永远不会匹配——p不在插槽“表面” - 选择器只能是简单形式：
::slotted(.btn)✅，::slotted(.btn:hover)❌，::slotted(div p)❌，连属性选择器带伪类（如[disabled]:focus）都不可用（Safari 16.4 前完全不支持）
::slotted() 能做什么、不能做什么
它是个轻量级“内容修饰工具”，不是样式穿透大杀器：
立即学习“前端免费学习笔记（深入）”；
- ✅ 可统一控制所有传入
button的margin、cursor、font-weight - ✅ 给
::slotted(img)加max-width: 100%防溢出 - ❌ 不能隐藏特定内容（比如
::slotted(.ad-banner) { display: none }），这属于业务逻辑该管的事 - ❌ 不能修改
position、z-index或触发动画——容易破坏父级布局预期 - ❌ 无法影响 slot 的 fallback 文本（即
<slot>fallback</slot>里的文字），那部分根本不在::slotted()作用域内
如何正确匹配命名 slot 和无名 slot
命名 slot 需显式对应，不能靠结构猜测：
- 若组件 shadow 中有
<slot name="header"></slot>，则必须用::slotted([name="header"])或更安全的::slotted(:not([name]):not([name="footer"]))来筛默认插槽（但注意：这个写法在 Safari 16.4 前不支持） -
::slotted(*)匹配所有被分发的顶层节点，但对空 slot（没传内容）完全不触发 - 如果插槽内容是纯文本节点（比如
<my-card>hello</my-card>），::slotted(span)这类选择器必然失效——文本节点不是元素，根本不参与匹配
最容易被忽略的一点：light DOM 中同名元素的样式优先级永远高于 ::slotted() 规则。比如你在外部写了 p { color: blue }，又在 shadow 内写了 ::slotted(p) { color: red }，最终显示的还是蓝色——::slotted() 不是“覆盖”，只是“建议”。真要强控，得让使用者把 class 放到最外层节点上，或者换用 ::part() + part="xxx" 主动暴露。
