随着 Web 技术的发展，前端应用的复杂性不断增加，需要更加高效和可维护的方式来管理代码和 UI 组件。在这种情况下，自定义 Web 组件已成为一种流行的解决方案。
在本文中，我们将介绍如何使用 Custom Elements API 来创建可重用的 Web 组件。我们将深入探讨 Custom Elements 的特性、用法和最佳实践，并提供示例代码和指导意义。
Custom Elements 的基础概念
Custom Elements 是 Web Component 规范的一部分，它允许开发者自定义 HTML 元素，提供一种更加模块化和可扩展的方式来构建应用。Custom Elements API 定义了两个核心部分：定义和注册。
定义 Custom Element
定义 Custom Element 的方式很简单：继承 HTMLElement 和使用 window.customElements.define API 进行注册。比如，我们可以通过下面的代码定义一个名为 hello-world 的元素。
class HelloWorld extends HTMLElement {
constructor() {
super();
this.innerHTML = "Hello, World!";
}
}
window.customElements.define("hello-world", HelloWorld);在这个示例中，我们定义了一个 HelloWorld 类，继承自 HTMLElement，然后使用 window.customElements.define API 进行注册，并将其名称设置为 "hello-world"。在元素被创建时，构造函数中的代码将会被执行，将 "Hello, World!" 添加为元素的内容。
注册 Custom Element
要注册 Custom Element，需要使用 window.customElements.define() 方法，并指定元素名称和元素构造函数。如果元素名称已被注册，将会抛出错误。
window.customElements.define('custom-element', CustomElement)Custom Elements 的特性
在定义 Custom Element 之后，我们可以使用其提供的特性来定制化元素。Custom Element API 定义了如下属性：
- extends：指定元素从哪种 DOM 元素扩展而来。可以使用 constructor.extends 属性或直接传入 extends 选项。
class FancyButton extends HTMLButtonElement {
constructor() {
super();
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });- observedAttributes：指定应该观察哪些属性的列表。在元素上使用 setAttribute() 或 removeAttribute() 方法修改时筛选指定属性的变化。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ -----------------
-
------------------------------ --------- --------- -
----------------------- ------- ------- ---- ----------- -- --------------
-
-- connectedCallback：当元素首次连接到文档DOM树中触发钩子。典型用例为装载 Shadow DOM，注册事件监听器或设置计时器。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------------- ----- -- --- ------
-
-- disconnectedCallback：当元素从文档DOM树中移除时触发钩子。典型用例包括清除计时器，销毁引用或取消注册事件监听器。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
---------------------- -
-------------------- ------- ---- --- ------
-
-- adoptedCallback：当元素被移动到不同的文档时触发钩子。典型用例包括克隆模版和重新初始化子组件。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
----------------- -
------------------- ------- ------- ---- - --- -----------
-
-自定义 Web 组件的最佳实践
创建自定义 Web 组件时，有一些最佳实践可供参考：
- 包装原始元素：如果您计划扩展现有的 DOM 元素，可以使用 extends 属性将其包装在自定义元素中。这允许您继承现有的行为，并以更模块化的方式构建应用程序。您可以在自定义元素的构造函数中调用 super()，以确保父类功能得到继承。例如：
class FancyButton extends HTMLButtonElement {
constructor() {
super();
this.style.backgroundColor = 'blue';
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });- 使用 Shadow DOM：Shadow DOM 为自定义元素提供了一种隔绝样式和元素的新方式。它允许您为自定义元素创建一个私有 DOM，其中的样式和事件不会泄漏到全局作用域。在您的自定义元素中使用 Shadow DOM 时，可以使用 :host 伪类样式访问自定义元素本身，而不是元素中的任何子元素。例如：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
----- - ------ ---- -
--------
------------ -------------
--
-
-
------------------------------------ ------------- 使用模板：模板提供一种将标记和 JavaScript 分离的方式，使应用程序更易于维护。将您的模板添加到自定义元素的 shadow DOM 中，以便您可以同时更新组件的样式和结构。例如：
-- -------------------- ---- -------
----- -------- - -----------------------------------
------------------ - -
-------
----- - ------ ---- -
--------
------------ -------------
--
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
--------------------------------------------------------------
-
-
------------------------------------ ------------自定义 Web 组件的示例代码
在下面的代码片段中，我们将结合前文介绍的 API 和最佳实践创建一个自定义 Web 组件，该组件可以在鼠标悬停时显示一条提示文本。我们将使用外部系统图标作为自定义元素的子元素，并使用 Shadow DOM 在元素中包装样式和行为。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- ---- - -------------------------------
-------------------------- --------
-------------- - ------
----- ------- - ------------------------------
----------------------------- -----------
----------------- - --------------------------
----- ------- - ------------------------------
----------------------------- -----------
--------------------------
-----------------------------
-------------------------------------
----------------------------------- -- -- -
--------------------- - --------
---
----------------------------------- -- -- -
--------------------- - -------
---
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-- --------- --- --------- -
--------------------------------------------------- - ---------
-
-
------------------- -
----- ----- - --------------------------------
----------------- - -
-------- -
--------- ---------
-------- -------------
------- --------
-
-------- -
-------- -----
--------- ---------
---- -----
----- ----
---------- -----------------
----------------- -----
------ -----
-------- -----
-------------- -------
-
----- -
------------ -----
------ -----
------------- -------
-
--
-----------------------------------
-
-
---------------------------------- ---------总结
Custom Elements API 为开发者提供了一种创建可重用的 Web 组件的方式。本文介绍了 Custom Elements 的特性、用法和最佳实践，并提供了示例代码和指导意义。如果您正在开发 Web 应用程序，并希望获得更好的模块化和可维护性，请考虑使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1d24dadd4f0e0ffb051f1