在 HTML 中，使用 CSS 的 ::slotted(*) 选择器可以选中所有被投影到 中的元素，并为其设置样式。这个选择器专门用于样式化 Web Components 中的插槽内容。示例代码：

真正能用的 ::slotted() 写法和限制

::slotted() 的括号里只接受「单个简单选择器」，且只作用于被 slot 接收的最外层节点。它的样式能力非常有限：只能设置该节点自身的属性（如 color、font-size、margin），不能影响其子元素，也不能触发伪类（如 ::slotted(:hover) 不生效）。

• ::slotted(*) —— 匹配所有直接插槽的元素（推荐用于统一基础间距或显示控制）
• ::slotted(div)、::slotted([slot="header"]) —— 按标签名或属性匹配顶层元素
• ::slotted(.title) —— 仅当传入的是

  …

  这种**自身带 class 的顶层元素**才生效
• ❌ ::slotted(*) p、::slotted(.title span)、::slotted(:focus) —— 全部无效

想样式化 slot 内容的子元素？得换思路

如果目标是让插槽里的

、 等有特定样式，唯一可靠的方式是：由内容提供方自己加 class，或在自定义元素外部用全局 CSS（需注意作用域泄漏风险）。

例如，在宿主页面写：

.my-card :is(p, span) {
  color: var(--text-muted);
}

或者要求使用者显式标注：

<my-card>
  <p class="slot-content">This will be styled</p>
</my-card>

然后在 shadow DOM 里写：::slotted(.slot-content) —— 这样才能生效。

另一个可行但侵入性更强的做法：用 JavaScript 遍历 slot.assignedNodes()，给子元素手动加 class，但会破坏纯 CSS 声明式逻辑，且可能触发重排。

兼容性和调试建议

::slotted() 在 Chrome 53+、Firefox 63+、Safari 13.1+ 支持良好，但 Edge Legacy 不支持。调试时容易误判为“样式没生效”，其实是选择器本身就没命中。

• 用 DevTools 的 Elements 面板确认 slot 内容是否真被分配（看 slot.assignedElements() 返回值）
• 检查目标元素是否真的是“直接子级”——嵌套一层

  …

  就会让

  完全逃出 ::slotted() 控制范围

• 别指望它替代 scoped 样式；它只是 slot 投影链上一个极其狭窄的样式入口点

真正难的不是写对 ::slotted(*)，而是意识到它根本不是用来做“深度样式定制”的工具。一旦需要控制插槽内容的内部结构，就得把样式责任交还给内容作者，或改用其他封装策略。

今天关于《在 HTML 中，使用 CSS 的 ::slotted(*) 选择器可以选中所有被投影到 中的元素，并为其设置样式。这个选择器专门用于样式化 Web Components 中的插槽内容。示例代码：

这是插槽内容