::slotted()仅样式化slot分发的light DOM顶层元素，不能作用于Shadow DOM内部节点；它必须写在shadow root内style中，只匹配直接子节点，不支持伪类、复合选择器及属性选择器，且优先级低于外部同名样式。

直接说结论：::slotted() 不能样式化 Shadow DOM 内部节点，它只作用于被 分发进来的、light DOM 中的**顶层元素**。想改 Shadow DOM 自己的结构？该用 ::part() 或 :host，不是 ::slotted()。

为什么 ::slotted(p) 有时不生效

最常见原因就三个：

• ::slotted() 必须写在 shadow root 内的 里，全局 CSS 或 引入的样式完全无效
• 它只匹配 slot 的**直接子节点**：传入

  hi

  ，::slotted(div) 可以命中，::slotted(p) 永远不会匹配——p 不在插槽“表面”
• 选择器只能是简单形式：::slotted(.btn) ✅，::slotted(.btn:hover) ❌，::slotted(div p) ❌，连属性选择器带伪类（如 [disabled]:focus）都不可用（Safari 16.4 前完全不支持）

::slotted() 能做什么、不能做什么

它是个轻量级“内容修饰工具”，不是样式穿透大杀器：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• ✅ 可统一控制所有传入 button 的 margin、cursor、font-weight
• ✅ 给 ::slotted(img) 加 max-width: 100% 防溢出
• ❌ 不能隐藏特定内容（比如 ::slotted(.ad-banner) { display: none }），这属于业务逻辑该管的事
• ❌ 不能修改 position、z-index 或触发动画——容易破坏父级布局预期
• ❌ 无法影响 slot 的 fallback 文本（即 fallback 里的文字），那部分根本不在 ::slotted() 作用域内

如何正确匹配命名 slot 和无名 slot

命名 slot 需显式对应，不能靠结构猜测：

• 若组件 shadow 中有 ，则必须用 ::slotted([name="header"]) 或更安全的 ::slotted(:not([name]):not([name="footer"])) 来筛默认插槽（但注意：这个写法在 Safari 16.4 前不支持）
• ::slotted(*) 匹配所有被分发的顶层节点，但对空 slot（没传内容）完全不触发
• 如果插槽内容是纯文本节点（比如 hello），::slotted(span) 这类选择器必然失效——文本节点不是元素，根本不参与匹配

最容易被忽略的一点：light DOM 中同名元素的样式优先级永远高于 ::slotted() 规则。比如你在外部写了 p { color: blue }，又在 shadow 内写了 ::slotted(p) { color: red }，最终显示的还是蓝色——::slotted() 不是“覆盖”，只是“建议”。真要强控，得让使用者把 class 放到最外层节点上，或者换用 ::part() + part="xxx" 主动暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！