自定义元素：使用原生 JavaScript 实现 Web Components-JavaScript中文网-JavaScript教程资源分享门户

Web Components 是一种自定义 HTML 元素的技术，已经成为前端领域中广泛使用的一种技术。Web Components 可以让我们创建符合标准的、可重用的、可组合的自定义元素。

Web Components 中的自定义元素

Web Components 包含许多单独的技术，其中之一就是 Custom Elements，用于创建自定义 HTML 元素。我们可以使用原生 JavaScript 实现我们自己的自定义元素，而不需要使用任何第三方库或框架。

自定义元素不止是普通的 HTML 元素，它们还可以有自己的行为和属性集合。当然，这些自定义元素需要经过一些特殊的定义和编码，以便能够与其他元素公用，且在用户使用时具备正常的 HTML 元素的交互体验。

自定义元素的创建

我们可以使用 Document.registerElement() 方法来自定义元素。该方法接受两个参数：

标签名：新元素的名称，必须使用短横线连接的自定义元素名称。
options：包含所有自定义元素选项的对象。

下面是创建一个简单的自定义元素，并将其添加到页面中的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Custom element demo</title>
  </head>
  <body>
    <custom-element></custom-element>
    <script>
      const CustomElement = document.registerElement('custom-element', {
        prototype: Object.create(HTMLElement.prototype)
      });

      const ce = new CustomElement();
      document.body.appendChild(ce);
    </script>
  </body>
</html>

在上面的代码中，我们定义了一个自定义元素 custom-element，并将其添加到页面中。我们先使用 registerElement() 方法，传递该元素名称和一个选项对象，以创建一个自定义元素构造函数。该选项中，必须指定元素的原型以便将其继承为新的 HTMLElement 对象。

然后我们通过创建自定义元素实例并将其附加到网页的 body。最终，我们将会看到一个空的自定义元素在页面上

自定义元素生命周期

自定义元素有四个阶段的生命周期：

定义
注册
连接
使用

定义阶段是我们使用可继承对象（通常是 HTMLElement）为该元素创建原型时所起始的阶段。注册阶段是将自定义元素添加到文档中的操作。连接阶段是当自定义元素被附加到文档时发生的。最后，使用阶段是在元素被添加到 DOM 树中时发生的，此时浏览器会渲染出该元素。

我们可以为自定义元素定义生命周期回调，以在各个阶段执行操作。例如，我们可以为其定义使用connectedCallback钩子函数：

class MyElement extends HTMLElement {
  connectedCallback() {
    console.log('My element was connected to the page');
  }
}
customElements.define('my-element', MyElement);

自定义元素的样式和行为

我们可以将自定义元素的行为和样式与其他元素分离的方法。我们可以在自定义元素中定义自己的 CSS 样式和 JavaScript 行为，以便与其他元素隔离。

在下面的示例中，我们可以为 <my-element> 元素定义样式以及一个点击事件的行为：

<my-element>My custom element</my-element>

my-element {
  color: blue;
  cursor: pointer;
}

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      console.log('My element was clicked');
    });
  }
}
customElements.define('my-element', MyElement);

如上代码生成的元素是有样式且具有点击事件行为的。

自定义元素的属性

自定义元素不止是普通的 HTML 元素，它们还可以有自己的属性集合。我们可以编写封装自定义元素时，提供属性和方法操作等行为的类来管理自定义元素的行为。

在下面的示例中，我们可以创建一个名为 my-element 的自定义元素，并为其定义一个属性 message：

<my-element message="Hello, World!"></my-element>

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = this.getAttribute('message');
  }

  set message(value) {
    this.setAttribute('message', value);
  }

  get message() {
    return this.getAttribute('message');
  }
}
customElements.define('my-element', MyElement);

上面的代码演示了如何使用框架的类来编写一个简单的自定义元素。我们将消息定义为一个属性，使其可以更容易地通过JavaScript、样式表和HTML访问。

我们可以使用 JavaScript 修改该元素的属性：

const ce = document.querySelector('my-element');
ce.message = 'Goodbye, World!';

自定义元素的属性值也可以通过 JavaScript 或样式表进行修改，但是这取决于它们是可变的还是不可变的。

总结

在本篇文章中，我们了解了 Web Components 中的自定义元素。我们使用原生 JavaScript 创建并操作了一个自定义元素，以及它的样式、行为、生命周期和属性。了解 Web Components 可以让我们创建可重用的自定义元素，为我们的应用程序增加更多的灵活性和自由度。

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