在 Web 开发中，很多时候我们需要自定义 HTML 元素来满足我们的需求。Custom Elements 和 Web 组件就是为了解决这个问题而生的，它们可以让我们轻松地创建自定义 HTML 元素，并且可以封装组件的功能，方便复用。
什么是 Custom Elements？
Custom Elements 是 Web Components 的一部分，它是一个 JavaScript API，用于创建自定义 HTML 元素。Custom Elements 让我们可以扩展 HTML 元素，创建出全新的元素，这些元素可以拥有自己的属性、方法和事件。
Custom Elements 的 API 主要由两个部分组成：
customElements.define()：用于定义一个自定义元素。HTMLElement的生命周期钩子函数：用于在元素的生命周期中执行一些操作。
下面是一个简单的例子，我们定义了一个 <my-element> 元素，并且在该元素的构造函数中添加了一些属性和方法：
----- --------- ------- ----------- -
------------- -
--------
-------- - ------
-
---------- -
------------------- ---------
-
-
----------------------------------- -----------在上面的代码中，我们通过 class 关键字创建了一个名为 MyElement 的类，继承自 HTMLElement。然后我们在 constructor 中添加了一个属性 foo 和一个方法 sayHello。最后，我们通过 customElements.define() 方法将这个自定义元素注册到了浏览器中，这样我们就可以在 HTML 中使用 <my-element> 元素了。
什么是 Web 组件？
Web 组件是一种用于创建可复用的 UI 组件的技术，它是由 Custom Elements、Shadow DOM 和 HTML Templates 三个技术组合而成的。Web 组件可以让我们封装组件的功能，使得组件的实现细节对外部不可见，从而提高组件的可维护性和可复用性。
下面是一个简单的例子，我们定义了一个名为 my-button 的按钮组件，并且在组件的模板中添加了一个 <button> 元素：
----- -------- ------- ----------- -
------------- -
--------
----- -------- - ----------------------------------------------
----- ----- - ---------------------------------
------------------- ----- ------ ----------------------
-
-
---------------------------------- ------------------- ------------------------
-------
------ -
----------------- -----
------ ------
---------- -----
-------- ---- -----
-------------- ----
------- -----
-------- -----
------- --------
-
--------
------------------------------
-----------
---------------- ---------------在上面的代码中，我们通过 class 关键字创建了一个名为 MyButton 的类，继承自 HTMLElement。然后我们在构造函数中通过 document.getElementById() 方法获取了一个名为 my-button-template 的模板元素，并且通过 cloneNode() 方法克隆了该模板节点。接着我们通过 attachShadow() 方法创建了一个 Shadow DOM，并且将克隆的模板节点添加到了 Shadow DOM 中。最后，我们通过 customElements.define() 方法将这个自定义元素注册到了浏览器中。
在 HTML 中，我们使用了 <template> 元素来定义组件的模板，然后在模板中使用了 <slot> 元素来定义插槽，从而使得组件的内容可以动态地插入到模板中。最后，我们使用 <my-button> 元素来使用该组件，并且在元素中添加了一个文本节点，该文本节点会被插入到组件中的插槽中。
如何使用 Custom Elements 和 Web 组件？
使用 Custom Elements 和 Web 组件非常简单，只需要按照以下步骤即可：
- 定义一个自定义元素，继承自
HTMLElement，并且添加必要的属性和方法。 - 在
constructor中使用this.attachShadow()方法创建一个 Shadow DOM，然后将组件的模板添加到 Shadow DOM 中。 - 在
connectedCallback中添加必要的事件监听器和样式。 - 在
disconnectedCallback中移除事件监听器和样式。
下面是一个完整的例子，我们定义了一个名为 my-counter 的计数器组件，并且在组件的模板中添加了两个按钮，用于增加和减少计数器的值：
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ----- - ---------------------------------
------------------- ----- ------ ----------------------
---------- - --
-
------------------- -
-------------------------------------------------------------------- -- -- -
-------------
--------------------------------------------------- - -----------
---
-------------------------------------------------------------------- -- -- -
-------------
--------------------------------------------------- - -----------
---
--------------------------------------------------- - -----------
-
---------------------- -
------------------------------------------------------------------------
------------------------------------------------------------------------
-
-
----------------------------------- -------------------- -------------------------
-------
------ -
----------------- -----
------ ------
---------- -----
-------- ---- -----
-------------- ----
------- -----
-------- -----
------- --------
-
--------
-----
------- ------------------------
----- ------------------
------- ------------------------
------
-----------
-------------------------在上面的代码中，我们通过 class 关键字创建了一个名为 MyCounter 的类，继承自 HTMLElement。然后我们在构造函数中通过 document.getElementById() 方法获取了一个名为 my-counter-template 的模板元素，并且通过 cloneNode() 方法克隆了该模板节点。接着我们通过 attachShadow() 方法创建了一个 Shadow DOM，并且将克隆的模板节点添加到了 Shadow DOM 中。最后，我们在构造函数中添加了一个属性 count，用于存储计数器的值。
在 connectedCallback 中，我们分别为增加和减少按钮添加了一个点击事件监听器，用于更新计数器的值，并且将更新后的值显示在计数器中。同时，我们还将初始的计数器值显示在计数器中。
在 disconnectedCallback 中，我们移除了增加和减少按钮的事件监听器。
在 HTML 中，我们使用了 <template> 元素来定义组件的模板，然后在模板中添加了两个按钮和一个计数器。最后，我们使用 <my-counter> 元素来使用该组件。
总结
Custom Elements 和 Web 组件是 Web Components 的核心技术之一，它们可以让我们轻松地创建自定义 HTML 元素，并且可以封装组件的功能，方便复用。在使用 Custom Elements 和 Web 组件时，我们需要定义一个自定义元素，并且在 constructor 中使用 this.attachShadow() 方法创建一个 Shadow DOM，然后将组件的模板添加到 Shadow DOM 中。同时，我们还需要在 connectedCallback 中添加必要的事件监听器和样式，在 disconnectedCallback 中移除事件监听器和样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66032605d10417a222f33f2d