在 Shadow DOM 中无法用 ::slotted() 选择器通过 querySelector 定位插槽元素，因其仅为 CSS 伪元素；应通过 host.querySelector('[slot="name"]') 或 slot.assignedNodes({flatten:true}) 获取被分发的 Light DOM 节点。
在 Shadow DOM 中无法直接用 slot 伪类或 ::slotted() 选择器通过常规 DOM 查询（如 querySelector）定位被插槽分发的元素，因为 ::slotted() 是**仅用于 CSS 样式的作用域内伪元素选择器**，不参与 JavaScript 的节点查找逻辑。
什么是 slotted 元素？
<slot></slot> 是 Shadow DOM 的内容分发机制，它“显示”来自 Light DOM 的匹配元素，但这些元素在 Shadow DOM 的 shadowRoot 中并不存在——它们仍保留在 Light DOM 树中，只是视觉上被渲染在 slot 位置。因此，JavaScript 查询必须区分两个上下文：
- Light DOM：宿主元素外部的真实子元素（可被
host.children、host.querySelectorAll(...)获取） - Shadow DOM：内部的
shadowRoot，其中只有<slot></slot>元素本身，没有被分发的节点
如何定位被 slot 分发的元素？
不能靠 ::slotted() 查找，但可通过以下方式间接定位：
-
从宿主元素出发，查询 Light DOM 子元素，并结合
slot属性匹配：被分发到某个<slot name="xxx"></slot>的元素，通常带有slot="xxx"属性（显式指定时）。例如：<my-component><div slot="header">标题</div></my-component>
可用host.querySelector('[slot="header"]')直接获取 -
遍历
<slot></slot>元素的assignedNodes()：这是标准且可靠的方式。每个<slot></slot>实例提供assignedNodes({ flatten: true })，返回实际被分发进来的节点列表（包括文本节点）。例如：
const slot = shadowRoot.querySelector('slot[name="footer"]');<br> const footerContent = slot?.assignedNodes({ flatten: true }) || [];
注意：返回的是节点数组，不是 Element 集合；若需过滤出元素，可用.filter(node => node.nodeType === Node.ELEMENT_NODE) -
监听
slotchange事件动态响应内容变化：插槽内容可能异步变更（如 Vue/React 动态渲染），应监听该事件再调用assignedNodes()确保取到最新内容
为什么 querySelector(':slotted(...)') 不工作？
:slotted(...)（注意是单冒号，CSS 伪类）仅在 Shadow DOM 的样式表中有效，属于 CSS 范畴；它不是真实 DOM 节点，也不出现在任何节点树中。JavaScript 的 querySelector 完全不识别该伪类，调用会静默失败或抛出语法错误（取决于浏览器实现）。
立即学习“Java免费学习笔记（深入）”；
实用建议
- 不要尝试用
shadowRoot.querySelector(':slotted(div)')—— 它无效 - 需要操作插槽内容时，优先用
<slot></slot>元素的assignedNodes()+ 属性筛选 - 若需样式化插槽内的元素，才在 Shadow DOM 的
<style></style>中使用::slotted(div) - 注意跨影子边界的事件委托：Light DOM 元素上的事件不会自动冒泡进 Shadow DOM，必要时用
composed: true发送事件
