Web Components 之 template 和 slot

Web Components 是前端开发中的一个重要概念，它是一种组件化开发的思想，可以让我们将页面拆分成多个组件，从而提高代码复用性和维护性。其中，template 和 slot 是 Web Components 中重要的两个概念，本文将详细介绍它们的用法和实现。

template

template 是一个 HTML 元素，它可以用来定义一个可复用的 HTML 模板。我们可以在模板中定义一些 HTML 结构和样式，然后在需要使用的地方引入该模板，从而减少重复的 HTML 代码。

使用方法

我们可以使用以下两种方式来定义一个模板：

// www.javascriptcn.com code example
<!-- 方式一：使用 script 标签 -->
<template id="my-template">
  <div class="my-class">
    <h1>这是一个模板</h1>
    <p>这里是模板的内容</p>
  </div>
</template>

<!-- 方式二：使用 template 标签 -->
<template>
  <div class="my-class">
    <h1>这是另一个模板</h1>
    <p>这里是另一个模板的内容</p>
  </div>
</template>

然后，我们可以使用 JavaScript 来获取模板并插入到页面中：

// 获取模板
const template = document.querySelector('#my-template');

// 克隆模板并插入到页面中
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);

示例

下面是一个使用模板的示例，我们使用模板来定义一个卡片组件：

// www.javascriptcn.com code example
<!-- 定义模板 -->
<template id="card-template">
  <style>
    .card {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      margin: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .content {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
  <div class="card">
    <h2 class="title"></h2>
    <div class="content"></div>
  </div>
</template>

<!-- 使用模板 -->
<div id="app"></div>
<script>
  // 获取模板
  const template = document.querySelector('#card-template');

  // 定义卡片组件
  class Card extends HTMLElement {
    constructor() {
      super();

      // 获取模板内容并克隆
      const content = template.content.cloneNode(true);

      // 获取卡片标题和内容元素
      const title = content.querySelector('.title');
      const contentEl = content.querySelector('.content');

      // 设置卡片标题和内容
      title.textContent = this.getAttribute('title');
      contentEl.innerHTML = this.innerHTML;

      // 插入到页面中
      this.appendChild(content);
    }
  }

  // 注册卡片组件
  customElements.define('my-card', Card);

  // 使用卡片组件
  const app = document.querySelector('#app');
  app.innerHTML = `
    <my-card title="卡片标题">
      这里是卡片内容
    </my-card>
  `;
</script>

slot

slot 是 Web Components 中的另一个重要概念，它可以让我们在组件内部定义一个插槽，从而让用户可以在使用组件时自由地插入内容。

使用方法

我们可以在组件内部使用 slot 元素来定义一个插槽：

// www.javascriptcn.com code example
<!-- 定义组件 -->
<template id="my-component-template">
  <style>
    .wrapper {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      margin: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
  </style>
  <div class="wrapper">
    <h2>这是一个组件</h2>
    <slot></slot>
  </div>
</template>

<!-- 使用组件 -->
<div id="app"></div>
<script>
  // 获取模板
  const template = document.querySelector('#my-component-template');

  // 定义组件
  class MyComponent extends HTMLElement {
    constructor() {
      super();

      // 获取模板内容并克隆
      const content = template.content.cloneNode(true);

      // 插入到页面中
      this.appendChild(content);
    }
  }

  // 注册组件
  customElements.define('my-component', MyComponent);

  // 使用组件
  const app = document.querySelector('#app');
  app.innerHTML = `
    <my-component>
      <p>这里是插入的内容</p>
    </my-component>
  `;
</script>

在上面的示例中，我们在组件内部定义了一个 slot 元素，并将它插入到了组件的 HTML 结构中。然后，在使用组件时，我们可以在组件的标签内部插入任意 HTML 内容，这些内容会被自动插入到 slot 中。

示例

下面是一个使用 slot 的示例，我们使用 slot 来定义一个带有标题和内容的卡片组件：

// www.javascriptcn.com code example
<!-- 定义模板 -->
<template id="card-template">
  <style>
    .card {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      margin: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .content {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
  <div class="card">
    <h2 class="title"><slot name="title"></slot></h2>
    <div class="content"><slot name="content"></slot></div>
  </div>
</template>

<!-- 使用模板 -->
<div id="app"></div>
<script>
  // 获取模板
  const template = document.querySelector('#card-template');

  // 定义卡片组件
  class Card extends HTMLElement {
    constructor() {
      super();

      // 获取模板内容并克隆
      const content = template.content.cloneNode(true);

      // 获取卡片标题和内容元素
      const titleSlot = content.querySelector('slot[name="title"]');
      const contentSlot = content.querySelector('slot[name="content"]');

      // 获取卡片标题和内容
      const title = this.getAttribute('title');
      const contentEl = this.querySelector('div');

      // 设置卡片标题和内容
      titleSlot.textContent = title;
      contentSlot.innerHTML = contentEl.innerHTML;

      // 插入到页面中
      this.appendChild(content);
    }
  }

  // 注册卡片组件
  customElements.define('my-card', Card);

  // 使用卡片组件
  const app = document.querySelector('#app');
  app.innerHTML = `
    <my-card title="卡片标题">
      <div>这里是卡片内容</div>
    </my-card>
  `;
</script>

在上面的示例中，我们在模板中定义了两个 slot 元素，分别用来插入卡片的标题和内容。然后，在使用组件时，我们可以在组件的标签内部使用 slot 元素来插入标题和内容，这些内容会被自动插入到对应的 slot 中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d23ebca941bf7134446436