assignedNodes() 是 slot 元素的方法，用于获取运行时分配到该插槽的实际节点；需在 slotchange 事件或 requestAnimationFrame 后调用，不可在 connectedCallback 中直接使用，也不能在非 slot 元素上调用。
在 Web Component 中，assignedNodes() 不是用来“查询 DOM”的通用方法，而是专门用于获取分配到某个 <slot> 中的实际节点。它和传统 DOM 查询（如 querySelector）目的不同：前者反映插槽内容的**运行时分发结果**，后者是静态查找。
什么是 assignedNodes()？
assignedNodes() 是 <slot> 元素上的一个方法，返回当前被插入到该插槽中的节点列表（即“已分配节点”）。它只在组件渲染后、内容完成分发（slot assignment）之后才有意义。注意：
- 必须在 <slot> 元素上调用，不能在自定义元素本身或其他任意元素上调用；
- 默认返回扁平化后的有效子节点（包括文本节点），不包含空格或换行符（除非传入 {flatten: true} 或 {flatten: false} 显式控制）；
- 在 connectedCallback 中调用通常为空，因为此时 slot 尚未完成分发；应放在 slotchange 事件或 requestAnimationFrame 后。
如何正确获取插槽节点？
推荐在 slotchange 事件中监听并读取，这是最可靠的方式：
- 给
<slot>添加slotchange监听器，确保内容分发完成后执行逻辑 - 在事件回调中调用
slot.assignedNodes({flatten: true})获取所有实际渲染节点 - 若需排除文本节点或注释节点，可过滤：
nodes.filter(node => node.nodeType === Node.ELEMENT_NODE)
示例：
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<slot name="header"></slot>
<div class="body"><slot></slot></div>
`;
}
<p>connectedCallback() {
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes({ flatten: true });
console.log('分配到默认插槽的节点：', nodes);
// 可在此处操作这些节点，比如加样式、绑定事件等
});
}
}常见误区与注意事项
- 不要在 connectedCallback 中直接调用 assignedNodes()：此时内容尚未分发，返回空数组
-
不要对非 slot 元素调用 assignedNodes()：会报错
TypeError: assignedNodes is not a function -
多个命名插槽要分别监听：每个
<slot name="xxx">都需要独立绑定slotchange - 动态更新内容后需重新监听或再次调用：DOM 变更（如 appendChild）可能触发新的 slotchange
替代方案：什么时候该用 querySelector？
如果你的目标是查找 Shadow DOM 内部的固定结构（比如按钮、输入框），而不是插槽内容，则应该用 this.shadowRoot.querySelector(...)。例如：
立即学习“Java免费学习笔记（深入）”；
- 查找 shadow root 里的
.submit-btn→ 用querySelector - 查找用户传进来的
<h1 slot="header">实际是否被渲染 → 用slot.assignedNodes()
