Web Components：如何从slot中选择文本节点？

云原生阿岚

2026-6-18

插槽仅含文本节点时的内容选择方法

当然可以选择插槽中的文本节点内容，只是不能用querySelector这类仅针对元素节点的方法，需要用节点相关的API来处理：

1. 获取用户传入的插槽文本节点

如果是组件使用时传入的文本内容（而非插槽的默认文本），可以使用slot元素的assignedNodes()方法，它能返回插槽分配的所有节点，包括文本节点：

class MyComponent extends HTMLElement {
  connectedCallback() {
    const slot = this.querySelector('slot');
    // 获取插槽分配的所有节点（flatten参数会展开嵌套插槽的内容）
    const assignedNodes = slot.assignedNodes({ flatten: true });
    // 筛选出文本节点（nodeType为3表示文本节点）
    const textNode = assignedNodes.find(node => node.nodeType === Node.TEXT_NODE);
    if (textNode) {
      console.log('选中的文本内容：', textNode.textContent.trim());
    }
  }
}
customElements.define('my-component', MyComponent);

2. 获取插槽的默认文本节点

如果是插槽自身包含的默认文本（即组件未传入内容时显示的文本），可以直接访问slot的childNodes属性，再筛选文本节点：

class MyComponent extends HTMLElement {
  connectedCallback() {
    const slot = this.querySelector('slot');
    // 获取插槽自身的子节点，筛选文本节点
    const defaultTextNode = Array.from(slot.childNodes).find(node => node.nodeType === Node.TEXT_NODE);
    if (defaultTextNode) {
      console.log('默认文本内容：', defaultTextNode.textContent.trim());
    }
  }
}
customElements.define('my-component', MyComponent);