JavaScript 中的 Web Components 插槽（Slots）与内容分发机制

一、描述

Web Components 插槽（<slot>）是 Shadow DOM 的核心功能之一，用于实现内容分发。它允许开发者定义自定义元素的模板时留下“空洞”，使得在使用自定义元素时，可以向这些空洞中插入任意的 HTML 子内容。插槽机制实现了类似 Vue 和 React 中“插槽”（Slots）或“子元素渲染”（Children Rendering）的功能，是构建灵活、可复用组件的基础。

二、基本概念：Shadow DOM 与插槽

Shadow DOM 允许将组件的内部结构封装起来，与外部 DOM 隔离。但一个完全封死的组件往往不实用，因为使用者可能需要向组件内部传入动态内容。插槽就是 Shadow DOM 中定义的一个占位符，它会“投影”（project）外部传入的内容到 Shadow DOM 内部。

三、插槽的基本用法

步骤1：定义带插槽的自定义元素

我们创建一个自定义元素 <my-card>，它有一个标题插槽和一个默认插槽。

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    // 定义模板，包含两个插槽
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 16px;
          border-radius: 8px;
        }
        .title {
          font-size: 1.2em;
          margin-bottom: 8px;
        }
      </style>
      <div class="card">
        <div class="title">
          <!-- 具名插槽，name 为 "title" -->
          <slot name="title">默认标题</slot>
        </div>
        <!-- 默认插槽（匿名插槽） -->
        <slot>默认内容</slot>
      </div>
    `;

    shadow.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-card', MyCard);

步骤2：使用自定义元素并传入内容

在 HTML 中，我们可以这样使用 <my-card>：

<my-card>
  <!-- 指定插入到 name="title" 的插槽 -->
  <span slot="title">自定义标题</span>
  <!-- 没有 slot 属性的内容会插入到默认插槽 -->
  <p>这是卡片的内容，可以是任何 HTML。</p>
  <button>点击我</button>
</my-card>

效果：

• 外部 <span slot="title"> 会替换掉 Shadow DOM 中 <slot name="title"> 的位置。
• 外部的 <p> 和 <button> 会一起替换掉默认插槽 <slot> 的位置。
• 如果外部没有提供对应插槽的内容，则显示插槽内部的默认内容（例如“默认标题”）。

四、插槽的工作原理

1. 插槽元素本身不渲染

<slot> 元素本身不会渲染成任何可见的 DOM 节点，它只是一个“占位符”。浏览器会将外部传入的内容“投射”到插槽的位置，但这些内容实际上仍然保留在外部 DOM 树中（称为“light DOM”），只是视觉上出现在 Shadow DOM 内部。

2. 内容投射的机制

• Light DOM：用户写在自定义元素标签内部的内容。
• Shadow DOM：组件内部的模板，包含 <slot>。
• 浏览器将 Light DOM 中匹配插槽的内容，按规则“投影”到 Shadow DOM 中插槽所在的位置进行显示。
• 检查匹配的规则：Light DOM 的子元素如果有 slot 属性，且与 Shadow DOM 中某个 <slot> 的 name 属性一致，则放入该插槽；否则放入默认插槽。

3. 插槽的 fallback 内容

如果某个插槽没有接收到外部内容，则会显示 <slot> 标签内部的子元素（即 fallback 内容）。例如：

<slot>默认内容</slot>

若没有内容分配给该插槽，则显示“默认内容”。

五、插槽的高级用法

1. 多个插槽与顺序

一个 Shadow DOM 可以定义多个具名插槽和一个默认插槽。外部内容按 slot 属性匹配，不匹配的进入默认插槽。

2. 使用 JavaScript 操作插槽

我们可以通过 JavaScript 访问插槽和分配的内容。

const card = document.querySelector('my-card');
const shadow = card.shadowRoot;

// 获取某个具名插槽元素
const titleSlot = shadow.querySelector('slot[name="title"]');

// 获取分配给该插槽的节点（返回一个 NodeList）
const assignedNodes = titleSlot.assignedNodes();
console.log(assignedNodes); // 包含 slot="title" 的 <span>

// 获取分配给默认插槽的节点
const defaultSlot = shadow.querySelector('slot:not([name])');
const defaultContent = defaultSlot.assignedNodes();

3. 插槽变化事件

当分配给插槽的内容发生变化时（例如动态添加/删除子元素），可以监听 slotchange 事件。

titleSlot.addEventListener('slotchange', (e) => {
  console.log('title 插槽的内容变化了', titleSlot.assignedNodes());
});

六、插槽与样式

1. 样式封装

Shadow DOM 内部的样式一般不影响外部，外部样式一般也不影响 Shadow DOM。但插槽投射的内容（属于 Light DOM）保留外部样式，不受 Shadow DOM 内部样式的影响，除非使用 ::slotted() 伪元素选择器。

2. ::slotted() 选择器

在 Shadow DOM 的 <style> 中，可以使用 ::slotted() 为投射进来的内容添加样式，但只能设置浅层样式（即直接子元素，不能深入其子孙）。

<style>
  /* 仅影响直接插入该插槽的元素 */
  ::slotted(p) {
    color: blue;
  }
  /* 无法影响插入元素的子元素 */
  ::slotted(p) span {
    color: red; /* 无效 */
  }
</style>

七、实际应用场景与注意事项

1. 构建 UI 组件库

插槽机制使组件可以灵活接收内容，例如：

• 卡片组件：标题区、内容区、操作区分不同插槽。
• 标签页组件：每个标签页内容通过插槽传入。
• 模态框：标题和正文内容可自定义。

2. 注意事项

• 只有直接子元素才能匹配插槽：如果 Light DOM 内容被包裹在另一个元素内，则无法匹配插槽。
• 性能考虑：大量动态插槽内容可能引发频繁的 slotchange 事件，需合理优化。
• 可访问性：插槽内容应保持语义化，确保屏幕阅读器能正确识别。

八、总结

Web Components 的插槽机制是实现内容分发的强大工具，它平衡了组件的封装性与灵活性。通过具名插槽和默认插槽，开发者可以定义清晰的组件接口，允许使用者注入自定义内容。结合 ::slotted() 样式和 slotchange 事件，可以构建出既样式可控又动态响应的组件系统。掌握插槽是深入使用 Web Components 的关键一步，也是理解现代前端框架插槽机制的基础。