如何遍历DOM筛选指定节点并正确处理slot插槽相关内容？

首先，先澄清你关于Slot.assignedNodes()的疑问，这是处理插槽内容的关键：

• 当设置flatten: false时：如果没有外部节点分配到该插槽，会返回插槽的默认子节点；如果有外部分配的节点，只返回那些被分配的节点（默认内容会被替换，不会返回）。
• flatten: true的作用是扁平化嵌套插槽：如果插槽内容里还有嵌套的<slot>元素，它会递归展开，返回最终的叶子节点（如果嵌套插槽没有被外部内容替换，也会包含其默认内容）。这个参数命名其实是合理的——它把嵌套的插槽结构“扁平化”成最终的内容节点列表。

回到你的核心需求：遍历DOM时要严格遵循插槽相关规则，同时筛选特定节点。我推荐手动递归遍历（基于Node API）+ 插槽内容显式处理，相比TreeWalker，这种方式更灵活，能完全贴合你的规则。下面是具体实现思路和代码示例：

核心遍历逻辑 #

我们可以写一个递归函数，按照你的规则一步步处理节点：

1. 优先检查当前节点是否符合筛选条件：如果节点有validate方法、name属性和value属性，直接加入结果，终止对该节点的子节点和shadowRoot的遍历（符合你“不遍历符合条件节点的子节点及shadowRoot”的要求）。
2. 处理当前节点的shadowRoot：如果节点有shadowRoot，遍历其中所有<slot>元素，用assignedNodes({ flatten: true })获取每个插槽的最终内容节点，对这些节点递归调用遍历函数（这满足“遍历元素的shadowRoot并拾取其中插槽内的转移节点”的要求）。
3. 处理未被slotted的常规子节点：遍历当前节点的childNodes，跳过那些assignedSlot属性不为null的节点（这些节点已经被转移到某个插槽，符合你“跳过已被转移至元素shadowRoot插槽中的子节点”的要求），对剩下的节点递归调用遍历函数。

代码示例 #

function collectValidatableNodes(node) {
  const validatable = [];

  // 检查当前节点是否是目标节点：有validate方法、name属性、value属性
  const isTargetNode = 
    typeof node.validate === 'function' && 
    node.hasAttribute('name') && 
    'value' in node;

  if (isTargetNode) {
    validatable.push(node);
    // 符合条件，直接返回，不继续遍历后代
    return validatable;
  }

  // 处理shadowRoot中的插槽内容
  if (node.shadowRoot) {
    const slots = node.shadowRoot.querySelectorAll('slot');
    slots.forEach(slot => {
      // flatten: true 自动处理嵌套插槽，返回最终的内容节点
      const slottedNodes = slot.assignedNodes({ flatten: true });
      slottedNodes.forEach(slotNode => {
        validatable.push(...collectValidatableNodes(slotNode));
      });
    });
  }

  // 处理未被分配到插槽的子节点
  if (node.hasChildNodes()) {
    for (const child of node.childNodes) {
      // 跳过已被slotted的节点
      if (child.assignedSlot) continue;
      validatable.push(...collectValidatableNodes(child));
    }
  }

  return validatable;
}

// 使用示例：从你的自定义表单元素开始遍历
const mySuperForm = document.querySelector('my-super-form');
const targetNodes = collectValidatableNodes(mySuperForm);

为什么不推荐TreeWalker？ #

TreeWalker虽然能高效遍历DOM，但它的过滤逻辑很难完美适配你的插槽规则：

• 它默认不会进入shadowRoot（除非设置showShadowRoots选项），但即使进入，也需要额外处理插槽的assignedNodes，逻辑会变得复杂。
• 对于“跳过已slotted节点”、“符合条件节点终止遍历后代”这些自定义规则，TreeWalker的filter函数可以实现，但不如手动递归直观，后期维护成本更高。

额外注意点 #

• node.assignedSlot是标准DOM属性，所有被分配到插槽的节点都会有这个属性指向对应的<slot>元素，判断逻辑可靠。
• 使用flatten: true可以自动处理嵌套插槽的场景，不用手动递归处理多层插槽。
• 我们只处理shadowRoot中的<slot>元素，组件内部的其他shadowDOM元素不属于用户传入的表单内容，所以不需要遍历。

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