Web Components 是一种新的前端开发技术，它提供了一种创建自定义 HTML 元素的方法，并且可以在不同的网页中重复使用。其中 Custom Elements 是 Web Components 的一部分，它提供了一种自定义标签的方式，开发者可以使用 Custom Elements 创建自己的 HTML 元素，从而提高开发效率和组件复用性。
在本文中，我们将介绍如何使用 Custom Elements 创建自定义 HTML 元素，并包含详细的示例代码和实践指导。
创建自定义元素
首先，我们需要创建我们自己的 HTML 元素。在 HTML 中，我们通常使用类似 <div>、<img> 等标签来创建标准的 HTML 元素。但是，这些标签并不能满足我们所有的需求。为了协助我们创建更加复杂、可重用的元素，Custom Elements 应运而生。
在 Custom Elements 中，我们可以使用 customElements.define() 方法来创建自定义元素，该方法需要传入两个参数：
customElements.define('my-element', class extends HTMLElement {
constructor() {
super();
// 在此处定义元素的行为
}
});上述代码创建了一个新的自定义元素 my-element，它继承自原生的 HTMLElement 类，同时在构造函数中可以定义该元素的行为。我们可以在 constructor() 函数中，定义如何渲染元素的结构、CSS 样式、以及 JavaScript 行为等。
自定义元素的生命周期
自定义元素在创建时会经历一些生命周期的过程，例如：被插入 DOM 中、被移除、属性发生变化等。我们可以在这些生命周期过程中，定义元素的行为来满足各种需求。
connectedCallback()
connectedCallback() 方法会在元素首次被插入到文档 DOM 中时被调用。该方法可以使用 this.attachShadow() 方法来创建元素的 Shadow DOM，从而让元素具有独立的 CSS 样式和 JavaScript 代码。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ---------- - ------------------------ ---------
-------------------- - -
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
---------- -----------
--
-
-
----------------------------------- -----------上述代码定义了一个自定义元素 my-element，在其被插入文档 DOM 时，创建了一个 Shadow DOM，将样式和内容分离，使元素的样式更加具有封装性。
disconnectedCallback()
disconnectedCallback() 方法会在元素从文档 DOM 中删除时被调用，我们可以通过该方法来执行一些清理工作。
attributeChangedCallback()
attributeChangedCallback() 方法会在元素的属性被添加、移除、更改或替换时被调用，我们可以在该方法中检查属性的变化，并相应的响应该变化。
自定义元素的属性
除了上述的生命周期外，我们还可以定义自定义元素的属性，让其更加灵活。我们可以使用 observedAttributes() 方法来定义需要观察的属性，而每当该属性发生变化时，attributeChangedCallback() 方法会被调用。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
-
------------------- -
----- ---- - --------------------------
-------------- - ------- ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
-------------- - ------- --------------
-
-
-
----------------------------------- -----------上述代码中，我们定义了 name 属性，并在元素构造函数中使用 connectedCallback() 方法获取该属性的值，并将 innerText 设置为 Hello, ${name}!。同时，我们也在 attributeChangedCallback() 方法中检查了该属性的变化，实现了属性监听。
实战示例
下面我们使用一个实战的示例来演示如何使用 Custom Elements 创建自定义元素。
我们需要创建一个类似于 <input> 标签的自定义元素，来协助我们输入浮点数。
创建自定义元素
首先，我们需要创建自定义元素，并指定观察的属性。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----- ---------- - ------------------------ ---------
---------- - --------------------------------
--------------- - ---------
--------------- - -------
------------------------------------ -- -- -
-------------------------- ------------------
---
-----------------------------------
-
--- ------- -
------ ---------------------------
-
--- ---------- -
-------------------------- -----
---------------- - ----
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------- - ---------
-
-
-
------------------------------------ ------------上述代码中，我们在 observedAttributes() 方法中指定需要观察的属性，其中 value 属性是用来表示输入浮点数的。在元素构造函数中，我们使用 attachShadow() 方法创建了 Shadow DOM，并添加了一个 <input> 标签作为元素的输入框。同时，我们还添加了 input 事件监听器，用来监听输入框的变化并更新 value 属性。
最后，我们使用 customElements.define() 定义自定义元素，并命名为 float-input。
使用自定义元素
接下来，我们在 HTML 中使用自定义元素，并设置相应的属性和事件监听器。
-- -------------------- ---- -------
--------- -----
------
------
------------ -------------
-------
------
------------ ---------------------------
--------
----- ----- - --------------------------------------
------------------------------- -- -- -
---------------- ----- --- -----------------
---
---------
-------
-------上述代码中，我们创建了一个 <float-input> 元素，并设置了 value 属性为 3.14。同时，在 JavaScript 中添加了 input 事件的监听器，当用户进行输入时，会将浮点数值打印到控制台上。
总结
本文介绍了如何使用 Custom Elements 创建自定义 HTML 元素，并详细阐述了自定义元素的生命周期、属性以及实际应用。当需要创建自定义化、可重用的 HTML 元素时，Web Components 和 Custom Elements 是非常好的选择。
在实践过程中，我们可以根据自己的需求和特定场景，自由地进行组合和拓展，以提高开发效率和组件的复用性。希望本文能够帮助读者更加深入地理解 Web Components 和 Custom Elements，并激发创作出更多高质量、可维护、可扩展的自定义 HTML 元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f12eacf6b2d6eab3b056ad