在 Web 前端开发中，自定义 UI 组件是非常常见的需求。我们常常会使用一些常规的工具库如 Bootstrap，Ant Design 来快速开发我们的前端应用，但有些时候这些库并不能满足我们的需求，这时我们就需要自己动手开发自定义的 UI 组件。本文将介绍如何用 Custom Elements 和原生 JS 快速地开发自定义 UI 组件。
什么是 Custom Elements
Custom Elements 是 Web Components 中的一部分，它是一种允许开发者创建自定义元素的浏览器 API。一个 Custom Elements 可以与 HTML 标准元素完全一样使用，可以指定其标签名、样式、行为等。开发者可以用 Custom Elements 来定义新的 HTML 元素，并自定义它们的行为和样式。
如何使用 Custom Elements
使用 Custom Elements 的主要步骤是使用 customElements.define() 方法定义一个新元素，这个方法接收两个参数，第一个是元素的标签名，第二个是元素的定义，定义包括一些回调方法、样式和模板等。
定义 Custom Elements
定义 Custom Elements 的代码示例如下：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-- ------ -------- ----------
------------
-
------ -
-- -----
-
------------------- -
-- ------------
-
---------------------- -
-- ------------
-
------------------------------ --------- --------- -
-- -----------
-
------ --- -------------------- -
-- ---------
------ --------- ---------
-
-
------------------------------------- -------------上述代码定义了一个叫 my-component 的 Custom Elements，它继承了一个叫 HTMLElement 的内置原生元素，并定义了一些回调方法。其中，init() 方法用来初始化组件，connectedCallback() 方法在组件挂载到页面时被调用，disconnectedCallback() 方法在组件被移出页面时被调用，attributeChangedCallback() 方法在组件属性变化时被调用，并且静态属性 observedAttributes 用来定义需要监听的属性。
使用 Custom Elements
使用 Custom Elements 可以像使用 HTML 标准元素一样使用。例如，我们在 HTML 代码中写一个 my-component 标签，浏览器会自动将这个标签解析成一个 MyComponent 类的实例。
<my-component></my-component>
开发自定义 UI 组件
下面我们来看一个实际的案例，如何用 Custom Elements 和原生 JS 来开发一个自定义 UI 组件。
组件设计
我们将开发一个带有“数字加”、“数字减”两个按钮的计数器组件。组件初始值为 0，每次加或减按钮被点击时都会改变组件的值，并显示在组件中。
组件实现
首先，我们定义一个 HTML 模板和一些 CSS 样式来实现计数器组件的外观：
-- -------------------- ---- -------
--------- -------------
-------
----- -
-------- -------------
------- --- ----- -----
-------------- ----
-------- ----
-
------ -
------ -----
------- -----
-------- --
------- --
-------------- ----
----------------- -----
------- --------
-
------ -
------- ----
---------- -----
------------ -----
-
--------
-----
------- ---------------------
----- -------------------
------- --------------------
------
-----------然后，我们定义一个 Counter 类来实现计数器组件的功能：
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
---------- - --
------------- - -----------------------------------
---------- - --------------------------------------
---------- - -----------------------------------
---------- - -----------------------------------
--------- - ----------------------------------
------------
-
------ -
------------------------------------ -- -- ------------------
----------------------------------- -- -- ------------------
--------------
-
----------- -
-------------
--------------
---------------------- --------------------- - ------- ---------- ----
-
----------- -
-------------
--------------
---------------------- --------------------- - ------- ---------- ----
-
-------- -
-------------------- - -----------
-
-
---------------------------------------- ---------在 constructor 中，我们获取了我们定义的计数器组件的 HTML 模板、按钮元素等，并在初始化方法中监听了加、减按钮的点击事件。decrement() 和 increment() 方法分别实现了减和加操作，并在值改变时触发一个自定义事件。update() 方法用来更新 UI，将当前值渲染到组件中。
最后，我们在 HTML 中使用我们定义的计数器组件：
<counter-element></counter-element>
总结
如上所述，我们可以用 Custom Elements 和原生 JS 来快速地开发自定义 UI 组件。我们可以将自定义组件应用于任何类型的 Web 应用程序或网站，使我们的应用程序更加灵活和易于维护。但需要注意的是，Custom Elements 是一个比较新的 API，可能需要在一些浏览器上使用 polyfill 才能运行。
示例代码已上传至 GitHub。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab93d748841e989476437c