Custom Elements API 是 Web Component 标准中的一部分，它允许开发者创建自定义 HTML 元素并赋予它们自己的行为和样式。本文将深入讨论 Custom Elements API，介绍如何从概念到实现创建自己的自定义元素，并探究 Custom Elements API 的内部机制。
Custom Elements API 概述
Web Component 是一种封装可重用组件的框架，它由三个主要 API 组成：Shadow DOM、Custom Elements API 和 HTML Templates。Custom Elements API 是其中非常重要的一部分，它允许开发者自定义元素，并且使得这些自定义元素可以像原始 HTML 元素一样被使用，并可以拥有自己的行为和样式。
Custom Elements API 从概念上分为两个部分：定义 Custom Elements 和实例化 Custom Elements。
定义 Custom Elements
Custom Elements 的定义需要使用 customElements.define() 方法，该方法接受两个参数：元素名称和元素构造函数。下面是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ------- --------
-
-
----------------------------------- -----------在该示例中，自定义元素的名称设置为 "my-element"，元素的实现是一个继承了 HTMLElement 的类 MyElement。定义完成后，我们就可以在 HTML 中使用该元素：
<my-element></my-element>
在上述示例中，MyElement 类的构造函数为空，而 connectedCallback() 方法用于在元素被插入到文档中时运行。在 connectedCallback() 方法中，我们将元素的 innerHTML 设置为了 "Hello, World!"。
实例化 Custom Elements
要实例化 Custom Elements，我们可以使用标准的 document.createElement() 方法。下面是一个示例：
const myElement = document.createElement("my-element");之后，我们就可以将 Custom Elements 插入到 DOM 中：
document.body.appendChild(myElement);
这样一来，我们就可以看到一个 Custom Elements 被插入到了文档中，其中包含了 "Hello, World!" 的文本。
Custom Elements API 内部机制
Custom Elements API 的内部机制有许多细节，这里我们只介绍一些比较重要的部分。
生命周期回调
Custom Elements 在其生命周期中会触发一些生命周期回调，在这些回调中我们可以执行一些逻辑或设置元素的状态。下面是 Custom Elements 的生命周期回调列表：
constructor()：元素的构造函数，被用于创建 Custom Elements 实例。在构造函数中，我们可以执行一些初始化逻辑，例如创建 shadow DOM 等。connectedCallback()：当元素首次被插入到文档 DOM 中时会触发该回调。在该回调中我们可以执行初始化逻辑，例如数据绑定等。disconnectedCallback()：当元素从文档中移除时会触发该回调。在该回调中我们可以执行一些清理逻辑，例如取消数据绑定等。adoptedCallback()：当 Custom Elements 被移到一个新的文档中时会触发该回调。attributeChangedCallback(attributeName, oldVal, newVal)：当 Custom Elements 中任意一个被观察的属性发生变化时会触发该回调。在该回调中我们可以执行更新逻辑，例如重新渲染元素等。
自定义元素的继承与订阅
Custom Elements 允许开发者通过继承来复用已有的 Custom Elements 代码。例如：
-- -------------------- ---- -------
----- -------------- ------- ----------------- -
------------- -
--------
------------------------------ -- -- -
------------- -----------
---
-
------------------- -
-------------- - ------ -----
-
-
----------------------------------------- --------------- - -------- -------- ---在上述示例中，MyCustomButton 继承了 HTMLButtonElement，并在其构造函数中添加了点击事件监听器。在 connectedCallback() 方法中，我们将按钮的 innerHTML 设置为了 "Click me!"。
下面是在 HTML 中使用 MyCustomButton 的示例：
<button is="my-custom-button"></button>
在实现自定义元素时，我们还可以订阅其他 Custom Elements 的生命周期事件，以执行一些逻辑或者更新元素的状态。例如，我们可以订阅 mousemove 事件，以检测鼠标移动时元素的位置是否需要更改。
自定义元素的实用性和禁忌
Custom Elements API 虽然功能强大，但也存在一些使用上的问题和禁忌。
实用性
Custom Elements API 提供了一种很好的途径来扩展现有 HTML 元素的功能，并且允许开发者在 HTML 中创建可重用组件。在大型应用程序中，Custom Elements 可以帮助我们保持代码的结构清晰，并在多个模块之间共享代码。此外，由于 Custom Elements 可以完全自定义化，因此我们可以自由地定义它们的样式和行为。这意味着 Custom Elements 可以与多种框架和库集成，从而更好地与应用程序的 UI 风格相匹配。
禁忌
虽然 Custom Elements 可以让你创建自己的 HTML 元素，但它并不一定适用于每个使用场景。在某些情况下，如果你仅仅是想自定义某个现有元素的样式或行为，那么使用 CSS 或 JavaScript 可能会更为简单。此外，Custom Elements 也存在一些使用上的禁忌。例如，不应该创建一些类似于 div 或 span 这样的普通 HTML 元素的 Custom Elements，因为这可能会导致混淆和代码混乱，而且会浪费浏览器资源。此外，在大型的应用程序中使用 Custom Elements 可能会导致较大的文件大小和性能问题。
总结
Custom Elements API 允许开发者创建自定义 HTML 元素，并赋予其自己的行为和样式。通过 Custom Elements，我们可以使元素与多种框架和库集成，并在多个模块之间共享代码。在实现 Custom Elements 时，我们需要了解其内部机制，例如生命周期回调、继承和订阅等。虽然 Custom Elements 在很多场景下都是很有用的，但是我们也需要注意其使用上的禁忌，尤其是不应该创建类似于 div 或 span 这样的普通 HTML 元素的 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ecca4968c7c53b0d1ed9c