在 Web 开发中，我们经常需要创建自定义的 HTML 元素，并在应用程序的不同部分重复使用它们。为了优化开发流程，我们可以使用 Web Components 技术来创建自定义元素并将其封装在一个单独的模块中，使其可被多个应用程序共享。
在 Web Components 中，Custom Elements 是其中的一种重要组成部分。本文将详细介绍 Custom Elements 的各种知识点，包括自定义元素的创建、生命周期、特性、事件等，并提供一些示例代码和实际应用场景供读者参考。
创建 Custom Elements
要创建自定义元素，我们需要使用 customElements.define() 方法。该方法接受两个参数：自定义元素名称和一个类构造函数，该构造函数可以创建元素的实例。
下面是一个简单的示例，用于创建一个名为 hello-world 的自定义元素。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- ------------ ------------- ------- ------ --------------------------- ------- ------------------------------ ------- -------
-- -------------------- ---- -------
-- --------------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ---- - -------------------------------
---------------- - ------- --------
-------------------------
-
-
------------------------------------ ------------在上面的示例中，Custom Elements 类 HelloWorld 继承自内置的 HTMLElement 类，它重写了 constructor 方法和 connectedCallback 方法。
在 constructor 方法中，我们首先调用 super() 方法，然后创建元素的阴影 DOM，这是一组与元素相关联但独立于主文档的 DOM 节点。
在 connectedCallback 方法中，我们向元素中添加了一些子节点，这些子节点最终将显示在文档中。由于我们使用了阴影 DOM，因此我们使用this.attachShadow({ mode: 'open' }) 创建了阴影 DOM 的根元素。
最后，我们通过 customElements.define() 方法将 hello-world 自定义元素与其构造函数 HelloWorld 绑定起来。现在，我们可以在 index.html 中使用 <hello-world> 元素。
自定义元素的生命周期
Custom Elements 拥有自己的生命周期，这使得开发人员可以在不同的阶段执行操作。下面是 Custom Elements 生命周期的不同阶段：
constructor()：在元素实例被创建时调用，例如通过构造函数new MyElement()。connectedCallback()：在元素第一次被连接到文档 DOM 时调用。disconnectedCallback()：在元素从文档 DOM 中移除时调用。adoptedCallback()：在元素被移动到新文档时调用。attributeChangedCallback()：在元素的特性被添加、删除或更改时调用。
在上一节的示例中，我们已经演示了 constructor() 和 connectedCallback() 方法的使用。下面是一个示例，用于说明自定义元素生命周期的其他方法：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------------------
-
------------------- -
-------------------------
-
---------------------- -
----------------------------
-
----------------- -
-----------------------
-
--------------------------------------- --------- --------- -
---------------------- ---------------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------
----- --------- - -------------------------------------
------------------------------------- -- ------- ------------ ---------
------------- -- -
------------------------------------- -- ------- ------------
-- ------
------------- -- -
------------------------------------- -- ------- -------
-- ------
------------- -- -
----------------------------- ------- -- ------- --------- --- ------- ---- ---- -- ---
-- ------在上面的示例中，创建了一个名为 MyElement 的自定义元素，并将其添加到文档中。然后，我们删除并重新添加同一元素，并设置其属性。在每个阶段，我们记录日志并确认调用了适当的回调函数。
自定义元素的特性
自定义元素还可以拥有特性，这些特性可以与元素的属性一起使用。特性是在 HTML 中声明的，并可以通过元素的 getAttribute() 方法来读取它们的值。
下面是一个示例，用于为自定义元素添加特性：
-- -------------------- ---- -------
----------- -----------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------------------------------- -- ------- ---
-
-
----------------------------------- -----------
---------在上面的示例中，我们声明了一个名为 foo 的特性，并将其设置为 bar。在构造函数中，我们使用 this.getAttribute('foo') 读取值。
如果您想在属性值更改时收到通知，则可以使用 attributeChangedCallback() 方法。该方法接受三个参数：特性名称、旧值和新值。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
--------------------------------------- --------- --------- -
---------------------- ---------------- ------- ---- ----------- -- --------------
-
------ --- -------------------- -
------ --------
-
-
----------------------------------- -----------在上面的示例中，我们将 observedAttributes 静态属性返回字符串数组 ['foo']，这表示可以观察该元素的 foo 特性。在属性更改时，会调用 attributeChangedCallback() 方法。
自定义元素的事件
自定义元素还可以触发和监听事件，方法与普通元素相似。我们可以通过 this.dispatchEvent() 方法分发自定义事件，并通过 this.addEventListener() 方法注册它们的回调。
下面是一个示例，用于演示自定义元素如何触发事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ---------------------------------
------------------ - ------ ----
-------------------------------- -- -- -
---------------------- ----------------------- - -------- ---- ----
---
-------------------------
-
-
----------------------------------- -----------
----- --------- - -------------------------------------
-------------------------------------- -- -- -
------------------- ----- --------
---
-------------------------------------在上面的示例中，自定义元素中包含一个按钮，该按钮通过使用自定义事件 my-event 来触发。我们使用 this.dispatchEvent() 方法分发自定义事件。
然后，在文档根节点中创建一个新的 my-element 元素，并使用 addEventListener() 方法在该元素上注册 my-event 事件的回调函数。
当我们在 my-element 中单击按钮时，该自定义元素将触发 my-event 自定义事件，这将导致在文档根节点上注册的回调函数运行并输出一条日志。
结论
在 Web Components 中，自定义元素是其中的一种重要组成部分，它能够在 Web 开发中提供可重用的组件。在本文中，我们详细介绍了 Custom Elements 的各种知识点，包括自定义元素的创建、生命周期、特性、事件等，并提供了一些示例代码和实际应用场景供读者参考。通过学习 Custom Elements，您将能够更好地理解和使用 Web Components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3cc72f40ec5a964e4ef22