Custom Elements 入门指南：创建 HelloWorld 组件-JavaScript中文网-JavaScript教程资源分享门户

什么是 Custom Elements

Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并在页面中使用它们。这些自定义元素可以拥有自己的属性和方法，可以被添加到 DOM 树中，也可以被绑定事件。

Custom Elements 规范分为两部分：

定义一个自定义元素的 API，包括元素的名称、属性、方法和生命周期钩子等。
实现这个 API，创建一个可重用的自定义元素类。

创建一个 HelloWorld 组件

下面我们来创建一个简单的 HelloWorld 组件，它可以输出一段问候语。

定义元素 API

首先，我们需要定义 HelloWorld 组件的 API，包括元素名称和属性。

// javascriptcn.com 代码示例
class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.message = 'Hello, World!';
  }

  static get observedAttributes() {
    return ['message'];
  }

  connectedCallback() {
    this.innerHTML = `<p>${this.message}</p>`;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message' && oldValue !== newValue) {
      this.message = newValue;
      this.innerHTML = `<p>${this.message}</p>`;
    }
  }
}

customElements.define('hello-world', HelloWorld);

以上代码中：

HelloWorld 继承自 HTMLElement，表示我们要创建一个 HTML 元素。
constructor 方法中定义了 message 属性的初始值。
observedAttributes 方法返回一个数组，包含了我们要观察的属性名。
connectedCallback 方法在元素被添加到 DOM 树中时调用，它设置了元素的 HTML 内容。
attributeChangedCallback 方法在元素的属性值发生改变时调用，它更新了元素的 HTML 内容。

创建元素实例

现在我们可以在 HTML 中使用 hello-world 元素了：

<hello-world></hello-world>

这会创建一个空的 hello-world 元素。我们可以通过设置它的 message 属性来修改它的问候语：

<hello-world message="Hi, there!"></hello-world>

这会创建一个带有自定义问候语的 hello-world 元素。

总结

Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并在页面中使用它们。我们可以通过定义元素的 API 和实现这个 API，创建一个可重用的自定义元素类。在本文中，我们创建了一个简单的 HelloWorld 组件，并介绍了 Custom Elements 的基本用法。

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