用自定义元素（Custom Elements）构建可重用的表单组件
在现代化的 web 应用程序中，表单组件是一个重要的部分。然而在实现这些组件上，我们经常遇到的一个问题是：表单组件往往会使我们的代码变得复杂且难以维护。为了解决这个问题，我们可以使用自定义元素来构建可重用的表单组件。
一、自定义元素概述
自定义元素是 HTML5 规范中的一部分，它允许开发者定义自己的 HTML 元素。使用自定义元素，我们可以通过 JavaScript 实现一些功能，例如扩展现有元素、创建全新的元素并将其添加到页面上、以及给元素添加新的行为等等。
自定义元素引入了两个新的 API：CustomElementRegistry 和 HTMLElement。CustomElementRegistry 是一个单例对象，它用于注册和管理自定义元素，而 HTMLElement 是所有自定义元素的基类。
二、使用自定义元素创建表单组件
我们可以使用自定义元素来创建可重用的表单组件。下面是一个例子，我们将创建一个名为 my-input 的元素，并将其添加到文档中。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------
-------
------
---------------------
--------
----- ------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
--------------------------
-
-
--------------------------------- ---------
---------
-------
-------在上述代码中，我们首先定义了一个名为 MyInput 的类，它继承自 HTMLElement。在 MyInput 类中，我们重写了 constructor 方法，并在其中创建一个 shadow DOM 节点和一个 input 元素，并将其附加到 shadow DOM 中。
接下来，我们使用 customElements.define 方法将 MyInput 类注册成一个自定义元素，并将其标签名设置为 my-input。
现在，我们已经创建了一个新的元素，并添加到了文档中。由于使用了 shadow DOM，我们的 input 元素将受到页面上其他元素的影响而不会受到影响，从而可以安全地在多个页面上重复使用 my-input 元素。
三、自定义元素的属性和方法
自定义元素还支持自定义属性和方法。下面是一个在 MyInput 类中定义了一个属性和一个方法的例子。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
------------------------------- -- -- -
-------------------------- -------------
---
--------------------------
-
------------------- -
-- ----------------------------- -
-------------------------- ----
-
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- ----- - ---------------------------------------
----------- - ---------
-
-
---------- -
------ ---------------------------
-
-
--------------------------------- ---------在上述代码中，我们首先在 MyInput 类中定义了一个 static get observedAttributes 方法，用于指定观察哪些属性的变化。在这个例子中，我们仅观察 value 属性。
在 constructor 方法中，我们创建了一个 input 元素，并在其上添加了一个 input 事件监听器。当 input 元素的值发生改变时，我们通过 setAttribute 方法将其值保存到 value 属性中。
在 connectedCallback 方法中，我们检查是否有 value 属性。如果没有，我们将其设置为一个空字符串。
在 attributeChangedCallback 方法中，我们监听 value 属性的变化，并将新的值设置到 input 元素中。
最后，我们在 MyInput 类中定义了一个 getValue 方法，用于获取 value 属性的值。
四、使用自定义元素构建更复杂的表单组件
自定义元素非常适用于构建复杂的表单组件。例如我们可以扩展上述的 MyInput 元素，以实现一个带有标签的表单控件。
-- -------------------- ---- -------
----- -------------- ------- ------- -
------ --- -------------------- -
------ --------- -----------------------------
-
------------- -
--------
----- ------ - ----------------
----- ----- - --------------------------------
----- ----- - ------------------------------
-------------------------- -------
-
------------------- -
--------------------------
----- ----- - ---------------------------------------
--------------- - ---------------------------
-
------------------------------ --------- --------- -
------------------------------------ --------- ----------
-- ----- --- -------- -
----- ----- - ---------------------------------------
--------------- - ---------
-
-
-
----------------------------------------- ----------------在上述代码中，我们首先创建了一个名为 MyLabeledInput 的类，它继承自 MyInput。在静态方法 observedAttributes 中，我们还观察了一个新的属性 label。
在构造函数中，我们使用 shadowRoot 找到我们的 input 元素，并在它前面添加了一个 label 元素。
连接回调函数中，我们首先调用了 super.connectedCallback()，以确保 value 属性被正确地设置。然后，我们找到了 label 元素并将其内容设置为 label 属性的值。
在 attributeChangedCallback 方法中，我们再次调用了 super.attributeChangedCallback() 以确保 value 属性被正确地设置。然后，我们找到了 label 元素并将其内容设置为 label 属性的新值。
现在，我们可以使用上述 MyLabeledInput 元素并传入 label 属性。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------
-------
------
----------------- ------------------------------
--------
----- ------- ------- ----------- -
-- ------- ---
-
----- -------------- ------- ------- -
-- -------------- ---
-
--------------------------------- ---------
----------------------------------------- ----------------
---------
-------
-------在上述代码中，我们创建了一个 my-labeled-input 元素，并传入了一个 label 属性。
总结
使用自定义元素可以帮助我们创建可重用且易于维护的表单组件。自定义元素还支持自定义属性和方法，使我们可以构建更加复杂的表单组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a5fa9968c7c53b0623c10