assignedelements() 返回空数组主因是调用过早，slot 尚未完成内容分配；应改用 slotchange 事件或 requestanimationframe 确保时机正确。
assignedElements() 返回空数组？检查 slot 是否已渲染完成
调用 assignedElements() 时返回空数组，最常见的原因是访问过早——slot 尚未完成内容分配（即投影尚未发生）。Web Components 的 slot 分配是异步的，发生在 DOM 更新后、connectedCallback 或 attributeChangedCallback 中直接调用通常拿不到元素。
正确时机是：requestAnimationFrame 下一帧，或使用 MutationObserver 监听 slotchange 事件：
slot.addEventListener('slotchange', () => {
const projected = slot.assignedElements();
console.log(projected); // ✅ 此时 guaranteed 非空（只要 slot 内有内容）
});
assignedElements({ flatten: true }) 的作用和陷阱
flatten: true 用于穿透嵌套的 <slot></slot> —— 即当 slot 内容本身又是一个自定义元素，且该元素内部也用了 <slot></slot> 投影时，启用该选项才能拿到最深层的被投影节点。
但要注意：它只对「多层 slot 嵌套」生效；若只是普通子元素（如 <div>、<code><p></p>），flatten 不影响结果。
- 不加
flatten：只返回直接分配给当前 slot 的顶层节点（可能包含一个自定义元素） - 加
flatten: true：递归展开所有内层 slot，返回最终渲染到该位置的所有底层元素 - 性能影响：深度嵌套时遍历开销略增，无嵌套则可忽略
assignedElements() 和 assignedNodes() 的关键区别
二者都反映 slot 的投影内容，但类型和粒度不同：
-
assignedElements()只返回Element节点（过滤掉文本节点、注释等） -
assignedNodes()返回全部分配的节点，包括Text、Comment等，需手动过滤 - 如果你只关心 HTML 元素（比如要遍历按钮、输入框），用
assignedElements()更安全简洁 - 若需处理纯文本内容（如插槽中写了
Hello <b>world</b>，其中 "Hello " 是文本节点），必须用assignedNodes()并检查node.nodeType
在 Shadow DOM 外部调用 assignedElements() 会报错
HTMLSlotElement.assignedElements() 只能在组件内部（即 shadow root 内）安全调用。如果尝试从 light DOM 外部、通过 document.querySelector('my-component').shadowRoot.querySelector('slot').assignedElements() 访问，会触发 SecurityError: Failed to execute 'assignedElements' on 'HTMLSlotElement'（Chrome/Firefox 均如此）。
根本原因：浏览器限制 slot 分配状态的跨边界访问，防止信息泄露。
可行替代方案：
- 在自定义元素内部暴露一个 getter 方法（如
getProjectedElements()），封装assignedElements()调用并返回结果 - 用
slot.assignedNodes({ flatten: true })+ 类型过滤模拟，但无法 100% 等价（缺少 slot 分配逻辑的实时性） - 避免外部强依赖投影结构；设计上优先通过属性/事件通信，而非直接读取 slot 内容
slot 的投影关系是内部实现细节，外部强行读取容易在升级或重构时断裂。
