如何在Web组件中查找所有slottable内容并枚举相关控件？

我来帮你梳理下怎么查找Web组件里的slottable内容，以及枚举指定插槽的元素，分两种场景来说明：

在组件外部（使用组件的页面中）查找 #

如果你是在使用<webtest>组件的页面脚本里想获取这些带插槽的元素，直接用常规的DOM选择器就能搞定：

• 获取所有带slot属性的slottable元素：

  const allSlottableEls = document.querySelectorAll('webtest [slot]');
  console.log('所有slottable元素:', allSlottableEls);
  

• 精准获取指定插槽名的元素（比如slot="a"、"b"、"c"）：

  // 获取slot="a"的元素
  const slotAEl = document.querySelector('webtest [slot="a"]');
  // 获取slot="b"的元素
  const slotBEl = document.querySelector('webtest [slot="b"]');
  // 获取slot="c"的元素
  const slotCEEl = document.querySelector('webtest [slot="c"]');
  

这里要注意你示例里的结束标签写错了，应该是</webtest>而不是</website>，不然会导致DOM结构异常。

在组件内部（自定义元素类中）枚举插槽元素 #

如果你是在<webtest>组件的类定义里想获取分配到各个插槽的元素，需要借助影子DOM的API：

首先假设你的组件模板里定义了对应的插槽：

<template id="webtest-template">
  <slot name="a"></slot>
  <slot name="b"></slot>
  <slot name="c"></slot>
</template>

然后在组件类中，可以通过this.shadowRoot访问影子DOM，再用slot.assignedElements()方法获取分配给该插槽的元素：

class WebTest extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('webtest-template');
    shadow.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    // 获取指定插槽的元素
    const slotA = this.shadowRoot.querySelector('slot[name="a"]');
    // assignedElements()返回分配给该插槽的元素数组，flatten: true会展开嵌套插槽的元素
    const slotAEls = slotA.assignedElements({ flatten: true });
    console.log('插槽a的元素:', slotAEls);

    // 批量枚举所有插槽及其对应的元素
    const allSlots = this.shadowRoot.querySelectorAll('slot');
    allSlots.forEach(slot => {
      const slotName = slot.name || '默认插槽';
      const assignedElements = slot.assignedElements();
      console.log(`插槽【${slotName}】对应的元素:`, assignedElements);
    });
  }
}

customElements.define('webtest', WebTest);

简单解释下：

• assignedElements()方法会返回一个数组，包含所有分配到该插槽的DOM元素；
• 传入{ flatten: true }参数时，会把嵌套插槽（比如插槽元素里又包含带slot属性的元素）的内容也展开返回，默认是false，只会返回直接分配的元素；
• 如果你的组件模板里没有定义对应的<slot>元素，那带slot属性的元素不会被渲染到影子DOM中，但在组件外部依然可以通过DOM选择器查到。

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