前言
在 Web 开发中，我们经常会遇到需要重复使用的 UI 组件，比如按钮、输入框、弹出框等等。而这些组件通常需要实现相同的功能，比如响应用户的点击事件、提供接口获取/设置组件的属性等等。这些组件的重复实现不仅浪费了开发者的时间和精力，也会导致代码冗余和维护难度增加。
为了解决这个问题，我们可以使用 Custom Elements 技术来实现自定义组件，从而实现简洁统一的 Web 开发方式。
什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它提供了一种自定义 HTML 元素的方式。通过 Custom Elements，我们可以创建自定义的 HTML 元素，这些元素拥有自己的属性和方法，可以像普通的 HTML 元素一样在页面中使用。
Custom Elements 的实现依赖于两个新的 Web API：CustomElementRegistry 和 HTMLElement。CustomElementRegistry 用于注册和管理自定义元素，而 HTMLElement 则是自定义元素的基类，所有自定义元素都继承自它。
如何使用 Custom Elements
定义自定义元素
要定义一个自定义元素，我们需要使用 CustomElementRegistry 的 define 方法。这个方法接受两个参数：元素名称和元素类。
class CustomElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('custom-element', CustomElement);在这个例子中，我们定义了一个名为 custom-element 的自定义元素，它继承自 HTMLElement。我们可以在 CustomElement 类中添加自定义属性和方法，这些属性和方法可以在页面中使用。
使用自定义元素
定义好自定义元素之后，我们可以像使用普通的 HTML 元素一样在页面中使用它。我们可以在 HTML 中使用标签 <custom-element> 来创建一个自定义元素的实例。
<custom-element></custom-element>
自定义元素的生命周期
自定义元素有自己的生命周期，这些生命周期包括 connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。这些生命周期方法可以帮助我们在自定义元素被创建、添加到 DOM 中、从 DOM 中移除或者被拷贝到另一个文档中时执行一些操作。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------- ------- ------------
-
---------------------- -
------------------- ------- ---------------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
----------------- -
------------------- ------- ----------
-
-
--------------------------------------- ---------------在这个例子中，我们在 CustomElement 类中实现了 connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback 方法，并在这些方法中输出了一些信息。
自定义元素的属性和方法
自定义元素可以拥有自己的属性和方法，我们可以在 CustomElement 类中定义这些属性和方法。在自定义元素中，我们可以使用 get 和 set 方法来定义属性，使用普通的方法来定义方法。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
---------- - ---
-
------ --- -------------------- -
------ ---------
-
--- ------ -
------ -----------
-
--- ----------- -
---------- - ------
------------------------- -------
-
---------- -
------------------- -----------------
-
------------------- -
------------------- ------- ------------
----------------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-- ----- --- ------- -
---------- - ---------
----------------
-
-
-
--------------------------------------- ---------------在这个例子中，我们在 CustomElement 类中定义了一个名为 name 的属性和一个名为 sayHello 的方法。我们通过 get 和 set 方法来定义 name 属性，通过普通的方法来定义 sayHello 方法。我们还在类中实现了 connectedCallback 和 attributeChangedCallback 方法，当 name 属性发生变化时，我们会调用 sayHello 方法来输出一些信息。
示例代码
下面是一个完整的自定义元素的示例代码，它实现了一个简单的计数器组件，可以通过点击按钮来增加计数器的值。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
---------------------------------
---------------------------------
--------
----- ------------- ------- ----------- -
------------- -
--------
----------- - --
----- -------- - -----------------------------------
------------------ - -
-------
------ -
---------- -----
-------- --- -----
------- --- ----- -----
-------------- ----
----------------- -----
------- --------
-
--------
------------- -----------
---------------------------
--
------------------- ----- ------ ---
--------------------------------------------------------------
----- ------ - ----------------------------------------
-------------------------------- -- -- -
--------------
------------------------------------------------- - ------------
---
-
------ --- -------------------- -
------ ----------
-
--- ------- -
------ ------------
-
--- ------------ -
----------- - ------
-------------------------- -------
------------------------------------------------- - ------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-- ----- --- -------- -
----------- - -----------------
------------------------------------------------- - ---------
-
-
-
--------------------------------------- ---------------
---------
-------
-------在这个示例代码中，我们定义了一个名为 custom-counter 的自定义元素，它实现了一个简单的计数器组件。我们在 CustomCounter 类中定义了一个名为 count 的属性和一个名为 sayHello 的方法，我们通过 get 和 set 方法来定义 count 属性，通过普通的方法来定义 sayHello 方法。我们还在类中实现了 connectedCallback 和 attributeChangedCallback 方法，当 count 属性发生变化时，我们会更新计数器的值。
在构造函数中，我们使用了 Shadow DOM 技术来创建计数器组件的 UI。我们创建了一个名为 template 的模板元素，它包含了计数器的 HTML 结构和样式。我们使用 attachShadow 方法来创建 Shadow DOM，并将 template 元素的内容添加到 Shadow DOM 中。我们还通过事件监听器来响应按钮的点击事件，每次点击时更新计数器的值。
总结
Custom Elements 技术为我们提供了一种自定义 HTML 元素的方式，可以帮助我们实现简洁统一的 Web 开发方式。通过定义自定义元素，我们可以实现重复使用的 UI 组件，从而减少代码冗余和维护难度。在使用 Custom Elements 时，我们需要注意自定义元素的生命周期、属性和方法的定义，以及 Shadow DOM 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65caeb32add4f0e0ff4bcaff