使用 Custom Elements 实现自定义的 HTML 元素-JavaScript中文网-JavaScript教程资源分享门户

HTML 元素是 Web 开发的基础，但是有时候我们需要一些特殊的元素来实现自己的需求。这时候，使用 Custom Elements 可以让我们创建自定义的 HTML 元素。

什么是 Custom Elements

Custom Elements 是一个 Web 标准，它允许我们创建自定义的 HTML 元素。它的核心是两个 API：customElements.define() 和 HTMLElement 类。

customElements.define() 方法用于定义一个自定义元素，它接受两个参数：元素名称和元素类。元素名称必须包含一个短横线，以避免与原生元素冲突。元素类必须继承自 HTMLElement 类。

class MyElement extends HTMLElement {
  // ...
}

customElements.define('my-element', MyElement);

定义了一个名为 my-element 的自定义元素，并将其绑定到 MyElement 类。

如何使用 Custom Elements

定义了一个自定义元素之后，就可以在 HTML 中使用它了。只需要在 HTML 中编写 <my-element></my-element> 标签即可。

<my-element></my-element>

但是，由于自定义元素是由 JavaScript 创建的，所以在 HTML 中使用它之前必须先加载 JavaScript 文件。

<script src="my-element.js"></script>
<my-element></my-element>

自定义元素的生命周期

自定义元素有自己的生命周期，可以通过继承 HTMLElement 类来实现生命周期方法。常用的生命周期方法有以下几个：

connectedCallback()：元素被插入到文档中时调用。
disconnectedCallback()：元素从文档中移除时调用。
attributeChangedCallback(attrName, oldVal, newVal)：元素的一个属性被增加、移除、或更改时调用。
adoptedCallback()：元素被移动到新的文档时调用。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    // ...
  }

  connectedCallback() {
    console.log('元素被插入到文档中');
  }

  disconnectedCallback() {
    console.log('元素从文档中移除');
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    console.log(`属性 ${attrName} 的值从 ${oldVal} 变为 ${newVal}`);
  }

  adoptedCallback() {
    console.log('元素被移动到新的文档');
  }
}

customElements.define('my-element', MyElement);

示例代码

下面是一个简单的自定义元素示例代码，它实现了一个带有计数器的按钮。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>自定义元素示例</title>
    <meta charset="utf-8">
    <script src="counter-button.js"></script>
  </head>
  <body>
    <counter-button></counter-button>
  </body>
</html>

// javascriptcn.com 代码示例
class CounterButton extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({ mode: 'open' });

    const button = document.createElement('button');
    button.textContent = '点击我';
    button.addEventListener('click', () => {
      this.count++;
      this.render();
    });

    const count = document.createElement('span');
    count.textContent = '0';

    shadowRoot.appendChild(button);
    shadowRoot.appendChild(count);

    this.count = 0;
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.querySelector('span').textContent = this.count;
  }
}

customElements.define('counter-button', CounterButton);

总结

使用 Custom Elements 可以让我们创建自定义的 HTML 元素，从而实现更加灵活和可扩展的 Web 应用程序。它的核心是 customElements.define() 方法和 HTMLElement 类，可以通过继承 HTMLElement 类来实现自定义元素的生命周期方法。

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