Web 组件是现代 Web 应用程序开发中不可或缺的部分，它能够帮助开发者更加高效地构建可重用的 UI 元素。 Custom Elements 是 Web 组件的核心之一，它允许开发者创建自定义的 HTML 标签，并且可以将其定义为 JavaScript 类。
本文将详细介绍 Custom Elements 的实战应用，让读者了解到 Web 组件的整个生命周期以及如何利用 Custom Elements 构建高性能、可维护的 Web 应用程序。
Custom Elements 简介
Custom Elements 是 Web Components 规范的一部分，定义了一种新的 HTML 标签和元素，可以在 HTML 文档中创建自定义元素，并将其封装到一个独立的 JavaScript 类中。
Custom Elements 是一个 polyfill 帮助我们完成的，因为目前 Custom Elements 的支持性不是很好，如果需要大幅度推广的话，需要结合着相应的 polyfill。
Custom Elements 由两个部分组成：注册 Custom Elements 和定义 Custom Elements。在注册 Custom Elements 之后，我们就可以在 HTML 文档中直接使用这些自定义元素。
在定义 Custom Elements 时，我们需要定义它的 HTML 模板和行为。HTML 模板可以使用 DOM 和 JavaScript 来创建，而行为则可以用来控制元素在页面上的样式和交互。
注册 Custom Elements
class CustomComponent extends HTMLElement {
constructor() {
super();
}
}
customElements.define('x-custom-component', CustomComponent);上述代码定义了一个自定义的 HTML 元素 x-custom-component，并将其注册到 Custom Elements 中。在使用时，可以像使用其他 HTML 标签一样来使用这个自定义元素：
<x-custom-component></x-custom-component>
为 Custom Element 增加属性
自定义元素也支持添加属性，我们可以通过自定义属性来控制它的行为。下面是一个简单的例子：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------- - ---------------------------
-
------------------- -
-------------- - ------ ------ ---------- ----- ------------- ---------------- -- -----------------------
-
-
------------------------------------------- -----------------在上面的例子中，我们添加了一个自定义属性 color，并在 constructor 中初始化。然后，在 connectedCallback 方法中，我们使用这个自定义属性来控制自定义元素的样式。
Shadow DOM
Shadow DOM 是 Web Components 规范中的另一个重要组成部分。它允许开发者将一个 DOM 树和其功能包装在一个独立的范围内，以便可以隔离 CSS、JavaScript 或任何其他代码的影响。
为了在 Custom Elements 中使用 Shadow DOM，我们可以使用 attachShadow 方法。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------- - ---------------------------
----------- - ------------------- ----- -------- ---
-
------------------- -
--------------------- - -
-------
---------- -
----------------- --------------
-------- -----
-------------- ----
------ ------
-
--------
---- ------------------
-------- ------ --------------
---- -- ------------------
------
--
-
-
------------------------------------------- -----------------上面的代码示例使用了 Shadow DOM 来隔离 CustomComponent 的样式和行为。当我们创建了一个 CustomComponent 实例后，它将包含一个 Shadow DOM，其中包含我们定义的样式和 HTML 内容。
生命周期
在 Custom Elements 中，有三个生命周期方法，分别是 connectedCallback、disconnectedCallback 和 attributeChangedCallback。这些方法可以让 Custom Elements 更加灵活且易于管理，以便开发者可以在特定的生命周期事件中进行一些操作。
connectedCallback
connectedCallback 方法会在 Custom Element 被插入文档时调用。
class CustomComponent extends HTMLElement {
connectedCallback() {
console.log('CustomComponent has been inserted into the document.');
}
}
customElements.define('x-custom-component', CustomComponent);disconnectedCallback
disconnectedCallback 方法会在 Custom Element 被从文档中移除时调用。
class CustomComponent extends HTMLElement {
disconnectedCallback() {
console.log('CustomComponent has been removed from the document.');
}
}
customElements.define('x-custom-component', CustomComponent);attributeChangedCallback
attributeChangedCallback 方法会在 Custom Element 的特定属性被增加、移除或更改时调用。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
---------------------------- ----- ------- ---- ----------- -- ---------------
-
-
-
------------------------------------------- -----------------observedAttributes 静态方法返回一个数组，其中包含要观察的属性名称列表。在 attributeChangedCallback 方法中，我们可以根据需要对属性值进行验证、更新或删除。
示例代码
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
------------- -------- ------------
-------
------
------------------- ---------------------------------
------------------- ----------------------------------
------- ------------------------------------
-------
--------- -------------------- ---- -------
-- ------------------
----- --------------- ------- ----------- -
------------- -
--------
---------- - ---------------------------
----------- - ------------------- ----- -------- ---
-
------------------- -
---------------------------- --- ---- -------- ---- --- ------------
--------------------- - -
-------
---------- -
----------------- --------------
-------- -----
-------------- ----
------ ------
-
--------
---- ------------------
-------- ------ --------------
---- -- ------------------
------
--
-
---------------------- -
---------------------------- --- ---- ------- ---- --- ------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
---------------------------- ----- ------- ---- ----------- -- ---------------
-
-
-
------------------------------------------- -----------------以上是一个简单的 Custom Elements 示例代码，可以为自定义组件动态添加属性并通过 console.log 输出相应信息，方便开发者进行调试。
总结
本文介绍了 Web 组件核心之一的 Custom Elements，讲解了如何注册和定义自定义元素，并且介绍了如何在 Custom Element 中使用 Shadow DOM，以及三个生命周期方法的使用。读者可以通过上述代码示例来快速了解 Custom Elements 的使用，进而构建强大的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466b8c1968c7c53b072d761