Custom Elements 是一种 Web Component 技术，可以让开发者定义自己的 HTML 标签，并在其中封装 JavaScript 行为和样式。使用 Custom Elements 可以提高代码的封装性和可复用性，使得开发者可以更轻松地构建复杂的 Web 应用。在本文中，我们将介绍如何使用 Custom Elements 创建可复用的轻量级 UI 组件。
Custom Elements 基础知识
在开始学习如何使用 Custom Elements 创建可复用的 UI 组件之前，我们需要了解一些基础知识。
Custom Elements 分为两种类型：autonomous custom element 和 customized built-in element。
autonomous custom element 是完全自定义的 HTML 标签，可以通过继承 HTMLElement 类或其子类来创建。
customized built-in element 则是基于原生 HTML 标签扩展而来的，可以继承原生 HTML 元素的任意子类。
创建 Custom Elements 的步骤如下：
- 创建一个类，继承 HTMLElement 或其子类；
- 编写类的构造方法，调用 super() 方法并将 element.attachShadow() 赋值给 this.shadowRoot 属性；
- 在类的原型上定义一些方法，例如 connectedCallback()、disconnectedCallback()、attributeChangedCallback() 等；
- 使用 window.customElements.define() 将自定义标签与上一步创建的类绑定在一起。
下面是一个示例，创建了一个名为 <my-element> 的自定义标签：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
--------------- - ------------------- ----- ------ ---
------------------------- - -
-------
-- ---- --
--------
-----
---- -- ---- -- ---
------
--
-
------------------- -
-- --- --- -----
-
---------------------- -
-- - --- -------
-
--------------------------------------- --------- --------- -
-- --------
-
-
------------------------------------------ -----------创建可复用的轻量级 UI 组件
了解了 Custom Elements 的基本用法之后，我们可以开始学习如何使用 Custom Elements 创建可复用的轻量级 UI 组件。
首先，我们需要考虑组件的 API 设计。API 应该是清晰、简单且易于使用的，同时也要提供足够的自定义能力。在设计 API 时，我们需要考虑到组件的作用、属性（props）以及事件。
接下来，我们可以创建组件的基本结构。通常情况下，组件的结构应该包含以下部分：
- HTML 结构，包括组件的内容和样式；
- 属性，在组件外部可以通过属性来配置组件；
- 事件，可以在组件内部触发或者在组件外部监听。
下面是一个简单的 Button 组件的实现：
-- -------------------- ---- -------
----- ------ ------- ----------- -
------------- -
--------
--------------- - ------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- -------------
----------- -----------
-------- --- -----
------- -----
-------------- ----
---------- -----
------------ ----
------ -----
----------------- --------
------- --------
-------- -----
----------- --- ----
-
------------- -
----------------- --------
-
----------------- -
-------- ---
------- ------------
-
--------
-------------
--
---------------- - ------
-
--- ---------- -
------ -----------------
-
--- --------------- -
---------------- - ---------------
-- ------------------ -
----------------------------- ----
- ---- -
---------------------------------
-
-
------------------- -
------------------------------ ---------------
-
---------------------- -
--------------------------------- ---------------
-
--------------------------------------- --------- --------- --
-------- - -- -- -
-- --------------- -
-------
-
----- ----- - --- -------------------- - -------- ---- ---
--------------------------
--
-
----------------------------------------- --------上面的代码中，我们实现了一个名为 <my-button> 的自定义按钮组件，包含了一些常用属性和事件。在组件的 HTML 结构中，我们使用了 <slot> 标签来支持插槽 (slot)。通过这种方式，使得组件的内容可以在组件外部动态变化，从而提高组件的可复用性和灵活性。
在组件的类中，使用 get 和 set 方法来定义 disabled 属性，并通过 addEventListener() 和 removeEventListener() 方法来注册和注销事件监听器。在 _onClick() 方法中，我们判断 disabled 属性的值是否为 true，如果是则不执行任何操作。
至此，我们已经创建了一个简单的轻量级自定义按钮组件。虽然一个自定义按钮组件可能还不够实用，但这是一个很好的开始。
总结
Custom Elements 是 Web Component 技术的一部分，可以让开发者定义自己的 HTML 标签，并在其中封装 JavaScript 行为和样式。使用 Custom Elements 可以提高代码的封装性和可复用性，进而加快 Web 应用的开发速度。
在本文中，我们介绍了如何使用 Custom Elements 创建可复用的轻量级 UI 组件，并提供了示例代码。相信通过阅读本文，读者已经对 Custom Elements 的使用和创建自定义组件有了更深入的了解，可以从中受益并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c17f0783d39b48815c7ee5