Custom Elements：创建可重复使用的组件-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，创造可重复使用的组件是一个非常重要的任务。在众多的组件库中，Custom Elements 是一个强大的工具，可以帮助开发人员创建并重复使用组件。

Custom Elements 通过自定义元素和 Shadow DOM 的支持，提供了一个可以扩展客户端浏览器的编程框架，让开发人员可以按照自己的意愿创造出自定义的 HTML 元素并且增加自己的逻辑和样式信息。

本文将介绍如何使用 Custom Elements 并创建一个简单的可重复使用的组件。

Custom Elements 的基本概念

Custom Elements 是一个基于 Web Components 标准的 API，用于扩展并创建自定义的 HTML 元素。Custom Elements 实现了新的 HTML 元素继承自 HTMLElement 接口的方式，并且可以借助 JavaScript 进行扩展，添加自定义行为和样式表。

Custom Elements 中最基本的概念就是自定义元素，一个自定义元素只是一个自己定义的 HTML 元素，拥有自己的标签名和属性。在定义一个自定义元素之前，需要先定义这个元素的原型，通过这个原型可以定义这个元素的状态（状态属性和状态方法），并将需要扩展的 HTML 接口添加到这个元素上。

除了自定义元素，Custom Elements 还提供了 Shadow DOM 的支持，这样可以使得自定义元素可以具有完全独立的样式和 DOM 结构。

如何使用 Custom Elements

为了定义一个自定义元素，我们需要使用以下方法：

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 初始化元素
  }
  connectedCallback() {
    // 当元素被插入到 DOM 中时调用
  }
  disconnectedCallback() {
    // 当元素被从 DOM 中移除时调用
  }
  attributeChangedCallback(name, oldValue, newValue) {
    // 当元素的属性值被更改时调用
  }
  static get observedAttributes() {
    // 返回一个字符串数组，表示设置为观察者的属性名列表
    return ['my-attribute'];
  }
}

上面的代码是自定义元素的基本结构。

构造函数

构造函数是在元素被创建时调用的，当元素被创建并且一个新的实例被创建时，构造函数就会被调用。在构造函数中，我们可以进行元素的初始化，并且可以将状态信息附加到元素上。

connectedCallback

在元素被插入到 DOM 中时，connectedCallback 方法就会被调用。在这个方法中，我们可以对组件进行一些初始化或者其他的一些操作。

disconnectedCallback

当元素被从 DOM 中移除时，disconnectedCallback 方法就会被调用。在这个方法中，我们可以清除掉一些不需要的状态信息或者进行资源的回收。

attributeChangedCallback

当元素的属性值被更改时，attributeChangedCallback 方法就会被调用。在这个方法中，我们可以对这个属性值进行一些操作。

observedAttributes

observedAttributes 是一个只读属性，返回一个数组，表示需要监听的属性值。

创建一个可重复使用的组件

在了解了 Custom Elements 的基本知识之后，我们现在就可以来创建一个简单的可重复使用的组件，这个组件可以用于显示一个带有图标和标题的卡片。

<my-card icon="https://.../icon.png" title="Hello World"></my-card>

我们先来定义这个组件的 HTML 结构：

<div class="card">
  <img class="icon" />
  <h2 class="title"></h2>
</div>

然后我们使用 Custom Elements 来创建这个组件：

class MyCard extends HTMLElement {
  static get observedAttributes() {
    return ['icon', 'title'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    // 创建 HTML 和 CSS 片段，这样我们就可以将 HTML 嵌套在 Shadow DOM 中
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        .card {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 300px;
          height: 200px;
          border: 1px solid black;
          border-radius: 5px;
          box-shadow: 5px 5px 5px #888888;
        }
        .icon {
          width: 50px;
          height: 50px;
          margin-right: 10px;
          border-radius: 50%;
        }
        .title {
          margin: 0;
        }
      </style>
      <div class="card">
        <img class="icon" />
        <h2 class="title"></h2>
      </div>
    `;

    // 克隆节点并添加到 Shadow DOM 中
    const clone = document.importNode(template.content, true);
    this.shadowRoot.appendChild(clone);
  }

  connectedCallback() {
    this.update();
  }

  update() {
    const icon = this.shadowRoot.querySelector('.icon');
    const title = this.shadowRoot.querySelector('.title');

    const iconUrl = this.getAttribute('icon');
    const titleText = this.getAttribute('title');

    icon.setAttribute('src', iconUrl);
    title.innerText = titleText;
  }
}

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

我们创建了一个 MyCard 组件，这个组件继承自 HTMLElement，可以使用自定义的标签名 <my-card>。在组件的构造函数中，我们传入了 { mode: 'open' }，表示我们要使用 Shadow DOM。在这个组件中，我们使用 CSS 来定义这个卡片的样式，在构造函数中创建了 HTML 和 CSS 片段，然后克隆该节点并添加到 Shadow DOM 中。

我们定义了两个属性，icon 和 title。在 update 方法中，我们通过这两个属性来更新我们组件中的图标和标题。

在 connectedCallback 方法中，我们使用了 update 方法来初始化组件。当组件的属性发生变化时，也需要通过 update 方法来更新组件的状态。

我们在组件的定义中使用了 Custom Elements 的 define 方法，这个方法允许我们将我们的组件注册为一个自定义元素，这样我们在 HTML 中就可以使用这个组件了。

现在让我们来使用这个组件：

<my-card icon="https://picsum.photos/200" title="博客"></my-card>

这里我们使用了一个随机图片来作为卡片的图标。

总结

Custom Elements 是一个强大的工具，可以帮助我们创建并重复使用组件。在这篇文章中，我们介绍了 Custom Elements 的基本概念，并创建了一个简单的可重复使用的组件。Custom Elements 在实际项目中可以帮助我们更好地组织和管理代码，提高开发效率和代码的可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a73a92add4f0e0ff031878

Custom Elements：创建可重复使用的组件