::slotted(*)仅能设置直接插入slot的顶层元素样式，无法影响其子元素或使用复合选择器；需由内容提供方加class或用全局CSS配合:is()实现深层样式控制。
::slotted(*) 不能直接设置子元素样式
这是最常见的误解：以为 ::slotted(*) 能像普通 CSS 选择器一样，对 slot 中内容的后代元素生效。实际上，::slotted() 只能匹配**直接插入 slot 的顶层元素**，且仅支持简单选择器（不能带空格、不能写 ::slotted(div p)），更无法穿透到子元素内部。
比如你写了：
<my-card> <div class="inner">Hello</div> </my-card>
在 <my-card> 的 shadow DOM 里用 ::slotted(*) 可以选中那个 <div class="inner">，但写成 ::slotted(.inner) 或 ::slotted(*) .inner 都无效——后者语法非法，前者因不满足“直接插槽”条件而失败。
真正能用的 ::slotted() 写法和限制
::slotted() 的括号里只接受「单个简单选择器」，且只作用于被 slot 接收的最外层节点。它的样式能力非常有限：只能设置该节点自身的属性（如 color、font-size、margin），不能影响其子元素，也不能触发伪类（如 ::slotted(:hover) 不生效）。
立即学习“前端免费学习笔记（深入）”；
-
::slotted(*)—— 匹配所有直接插槽的元素（推荐用于统一基础间距或显示控制） -
::slotted(div)、::slotted([slot="header"])—— 按标签名或属性匹配顶层元素 -
::slotted(.title)—— 仅当传入的是<h2 class="title">…</h2>这种**自身带 class 的顶层元素**才生效 - ❌
::slotted(*) p、::slotted(.title span)、::slotted(:focus)—— 全部无效
想样式化 slot 内容的子元素？得换思路
如果目标是让插槽里的 <p>、<span> 等有特定样式，唯一可靠的方式是：由内容提供方自己加 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()返回值） - 检查目标元素是否真的是“直接子级”——嵌套一层
<div><p>…</p></div>就会让<p>完全逃出::slotted()控制范围 - 别指望它替代 scoped 样式；它只是 slot 投影链上一个极其狭窄的样式入口点
真正难的不是写对 ::slotted(*)，而是意识到它根本不是用来做“深度样式定制”的工具。一旦需要控制插槽内容的内部结构，就得把样式责任交还给内容作者，或改用其他封装策略。
