什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并在页面上使用它们。Custom Elements 使得开发者可以创建自己的 UI 组件，而无需依赖外部库或框架。
Custom Elements 的基本结构
一个 Custom Element 由以下几部分组成：
- Element 类：定义 Custom Element 的行为和属性。可以通过继承 HTMLElement 来创建自己的 Element 类。
- 注册：将 Element 类注册为 Custom Element，使得它可以在页面上使用。
- 生命周期回调函数：在 Custom Element 的生命周期中，浏览器会调用一系列回调函数，开发者可以在这些函数中执行自己的逻辑。
下面我们将演示如何使用 Custom Elements 构建一个完整的 UI 框架，包括按钮、输入框和表单组件。
按钮组件
首先，我们需要创建一个按钮组件。按钮组件需要有以下属性和行为：
- text：按钮的文本内容。
- disabled：按钮是否禁用。
- click：按钮被点击时触发的事件。
我们可以通过继承 HTMLElement 类来创建一个 Button 类：
-- -------------------- ---- -------
----- ------ ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
------ -
-------- -------------
-------- --- -----
---------- -----
------------ -----
----------- -------
------- --------
------- -----
-------------- ----
----------------- --------
------ --------
-
---------------- -
-------- ----
------- ------------
-
--------
---------------------------------------------
--
----------- - ----------------------------------------
------------------------------------- -- -- -
---------------------- ----------------
---
-
------ --- -------------------- -
------ -------- ------------
-
------------------------------ --------- --------- -
------ ------ -
---- -------
----------------------- - ---------
------
---- -----------
-- --------- --- ----- -
------------------------------------ ----
- ---- -
----------------------------------------
-
------
--------
------
-
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
--- ---------- -
------ ------------------------------
-
--- --------------- -
-- ------- -
----------------------------- ----
- ---- -
---------------------------------
-
-
-
---------------------------------- --------在上面的代码中，我们重写了 Button 类的 constructor 函数，使用 Shadow DOM 创建了一个包含样式和按钮元素的根元素。我们还监听了按钮的 click 事件，并在事件中触发了一个自定义的 click 事件。这个自定义事件可以让外部代码监听按钮被点击的事件。
我们还定义了 observedAttributes 函数，它返回一个数组，包含了需要监听的属性名。当这些属性发生变化时，浏览器会调用 attributeChangedCallback 函数。
最后，我们定义了 text 和 disabled 的 getter 和 setter 函数，使得外部代码可以获取和设置按钮的属性值。
在 HTML 中，我们可以像这样使用自定义按钮组件：
<my-button text="Click me" disabled></my-button>
输入框组件
接下来，我们需要创建一个输入框组件。输入框组件需要有以下属性和行为：
- value：输入框的值。
- placeholder：输入框的占位符。
- disabled：输入框是否禁用。
- change：输入框的值被改变时触发的事件。
我们可以通过继承 HTMLElement 类来创建一个 Input 类：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- ------
------ -----
-------- ----
---------- -----
------- --- ----- --------
-------------- ----
----------------- --------
-
--------------- -
-------- ----
------- ------------
-
--------
------ ----------- --------------------------------------------------
--
---------- - ---------------------------------------
------------------------------------ -- -- -
---------------------- -----------------
---
-
------ --- -------------------- -
------ --------- -------------- ------------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
---------------- - ---------
------
---- --------------
---------------------- - ---------
------
---- -----------
-- --------- --- ----- -
----------------------------------- ----
- ---- -
---------------------------------------
-
------
--------
------
-
-
--- ------- -
------ -----------------
-
--- --------------- -
-------------------------- ----------
-
--- ------------- -
------ ---------------------------------
-
--- --------------------- -
-------------------------------- ----------
-
--- ---------- -
------ ------------------------------
-
--- ------------------ -
-- ---------- -
----------------------------- ----
- ---- -
---------------------------------
-
-
-
--------------------------------- -------在上面的代码中，我们重写了 Input 类的 constructor 函数，使用 Shadow DOM 创建了一个包含样式和输入框元素的根元素。我们还监听了输入框的 input 事件，并在事件中触发了一个自定义的 change 事件。这个自定义事件可以让外部代码监听输入框的值被改变的事件。
我们还定义了 observedAttributes 函数，它返回一个数组，包含了需要监听的属性名。当这些属性发生变化时，浏览器会调用 attributeChangedCallback 函数。
最后，我们定义了 value、placeholder 和 disabled 的 getter 和 setter 函数，使得外部代码可以获取和设置输入框的属性值。
在 HTML 中，我们可以像这样使用自定义输入框组件：
<my-input placeholder="Enter your name"></my-input>
表单组件
最后，我们需要创建一个表单组件。表单组件需要有以下属性和行为：
- values：表单的值。
- submit：表单提交时触发的事件。
- reset：表单重置时触发的事件。
我们可以通过继承 HTMLElement 类来创建一个 Form 类：
-- -------------------- ---- -------
----- ---- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
---- -
-------- ------
------ -----
-
--------
-------------
--
--------- - --------------------------------------
------------------------------------ ------- -- -
-----------------------
---------------------- -----------------
---
----------------------------------- -- -- -
---------------------- ----------------
---
-
------ --- -------------------- -
------ -----------
-
------------------------------ --------- --------- -
------ ------ -
---- ---------
----- ------ - ---------------------
--- ------ --- -- ------- -
-- ---------------- -
-------------------- - ------------
-
-
------
--------
------
-
-
--- -------- -
----- ------ - ---
----- ------ - ------------------------------------
---------------------- -- -
------------------ - ------------
---
------ -----------------------
-
--- ---------------- -
--------------------------- ----------
-
-------- -
-------------------
-
------- -
------------------
-
-
-------------------------------- ------在上面的代码中，我们重写了 Form 类的 constructor 函数，使用 Shadow DOM 创建了一个包含样式和表单元素的根元素。我们还监听了表单的 submit 和 reset 事件，并在事件中触发了自定义的 submit 和 reset 事件。这些自定义事件可以让外部代码监听表单被提交和重置的事件。
我们还定义了 observedAttributes 函数，它返回一个数组，包含了需要监听的属性名。当这些属性发生变化时，浏览器会调用 attributeChangedCallback 函数。
最后，我们定义了 values、submit 和 reset 的 getter 和 setter 函数，使得外部代码可以获取和设置表单的属性值，并调用表单的提交和重置方法。
在 HTML 中，我们可以像这样使用自定义表单组件：
<my-form> <my-input name="name" placeholder="Enter your name"></my-input> <my-input name="email" placeholder="Enter your email"></my-input> <my-button text="Submit" type="submit"></my-button> <my-button text="Reset" type="reset"></my-button> </my-form>
总结
使用 Custom Elements 可以方便地创建自定义的 UI 组件，而无需依赖外部库或框架。在本文中，我们演示了如何使用 Custom Elements 构建一个完整的 UI 框架，包括按钮、输入框和表单组件。这些组件可以在页面上使用，并提供了丰富的属性和事件，使得开发者可以灵活地定制和使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657a53d5d2f5e1655d497a10