如何观测ShadowDOM v1插槽的节点最终分发变化

问题背景 #

此问题并非ShadowDOM v0相关问题的重复，旧版本问题针对已废弃的ShadowDOM v0规范，对ShadowDOM v1的插槽与slotchange事件的描述并不完整。

现有规范中slotchange事件存在明显局限：仅能告知节点何时通过插槽分发，但无法直接给出节点的最终分发结果。如果存在三级ShadowRoot树的插槽嵌套（插槽逐层被分配给上层插槽），slotchange事件会因冒泡机制触发所有三层插槽的监听，冒泡顺序为从祖先插槽到最内层后代插槽，最深层插槽最后触发事件；如果使用事件capture捕获阶段监听，顺序则相反。整个事件传播过程中，event.target始终指向最上层Shadow树的插槽，并非节点最终分发到的插槽。

核心疑问 #

在没有原生distribution类事件的前提下，如何通过slotchange事件检测节点或元素的最终分发状态？
目前规范中缺少仅在节点最终分发至对应插槽/从对应插槽移出时才会触发的非冒泡事件distributionchange，也没有slot.distributedNodes()、slot.distributedElements()这类方法可以直接获取最终分发信息。

可行解决方案 #

方案1：递归遍历分发链获取最终归属插槽 #

每次slotchange事件触发时，不直接依赖event.target，而是通过递归遍历插槽的分发关联关系，定位节点的最终归属插槽：

• 封装工具函数getFinalSlotForNode(node)，逻辑如下：
  1. 先获取节点当前所在的插槽：const currentSlot = node.assignedSlot
  2. 如果currentSlot存在，且currentSlot本身的assignedSlot属性也存在（说明该插槽被分发到了上层插槽），则递归查询currentSlot.assignedSlot，直到某个插槽没有assignedSlot属性为止
  3. 返回的最终插槽就是节点实际分发到的插槽
• 此方案不需要修改事件监听逻辑，兼容性最好，适合组件嵌套层级不深的场景。

方案2：阻断冒泡+分层独立校验 #

通过阻断事件冒泡避免跨层级干扰，每层插槽只处理自身的分发事件：

• 给所有插槽的slotchange事件监听函数添加event.stopPropagation()，阻止事件向上冒泡到上层ShadowRoot的插槽
• 每层插槽的监听函数触发时，当前event.target就是本层插槽，调用slot.assignedElements({flatten: true})即可拿到本层最终分配的所有元素
• 此方案性能最优，不会触发不必要的监听回调，适合插槽嵌套层级较深的大型组件库场景。

方案3：维护全局分发状态映射表 #

对于需要频繁查询分发状态的场景，可以手动维护状态映射减少重复计算：

• 初始化一个WeakMap<Node, HTMLSlotElement>用来存储每个节点对应的最终分发插槽，WeakMap的特性可以避免节点被销毁后出现内存泄漏
• 每次slotchange事件触发时，遍历所有受影响插槽的分配节点，更新映射表中的对应关系
• 需要查询节点分发状态时直接从映射表读取即可，不需要每次递归遍历分发链。

内容的提问来源于stack exchange，提问作者trusktr