利用 Custom Elements 构建 Web 组件

什么是 Custom Elements？

Custom Elements 为开发者提供了一种定义自己的 HTML 元素的方法。它是 Web Components 规范的一部分，它使得开发者可以创建可重复使用的自定义组件。

Custom Elements 可以被组合到任何 Web 应用中，并且允许开发者通过简单的 HTML 标签定义自己的元素。

如何使用 Custom Elements？

通过一些简单的步骤就可以使用 Custom Elements：

1. 定义一个继承自 HTMLElement 的 JavaScript 类。
2. 使用 window.customElements.define() 方法将新的类名称注册为一个自定义元素。
3. 在页面上使用自定义元素的标签定义。

利用 Custom Elements 创建一个简单的组件

首先，我们需要创建一个可以重复使用的组件。在本例中，我们将创建一个简单的按钮。

定义一个 my-button 类：

-- -------------------- ---- -------
----- -------- ------- ----------- -
  ------------- -
    --------
    ----- ---------- - ------------------------ ---------
    ----- ------ - ---------------------------------
    ------------------ - ------------------------- -- ------ ----
    -------------------------------- -- -- ------------- ------------
    -------------------------------
  -
-

以上的代码创建了一个新的 MyButton 类，继承自 HTMLElement，同时在构造函数中，创建了一个 shadowRoot 并将一个 button 标签添加到 shadowRoot 中。

然后，我们可以使用以下的方式定义自己的 my-button 元素：

window.customElements.define('my-button', MyButton);

最后，我们可以在 HTML 页面上像这样使用 my-button ：

<my-button text="Custom Button"></my-button>

更多细节

Custom Elements 允许开发者在定义自己的元素时注意以下细节：

• connectedCallback() 方法：当元素首次连接到文档对象中时调用。
• attributeChangedCallback() 方法：当元素的属性值发生更改时调用。
• disconnectedCallback() 方法：当元素从文档对象中移除时调用。

总结

Custom Elements 可以让我们非常方便地创建自己的 Web 组件。 通过了解 Custom Elements 的使用方法，开发者可以更加方便地构建可重复使用的自定义组件，提升开发效率，减少冗余代码。

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