Custom Elements 是一组 Web 标准，用于创建自定义 HTML 元素。当然，自定义元素不仅仅是能够自定义标记名称，还要具备完整的 HTML 元素能力——属性、方法、事件等。本文将通过一个基于 Custom Elements 的简单组件，向大家介绍如何在 Custom Elements 中实现数据双向绑定。
原理简述
要实现数据双向绑定，我们需要做的就是监听元素的输入事件和数据属性的变化事件，然后在事件处理程序中对另一个属性进行相应的更新。
例如，我们有一个自定义元素叫做 MyInput，它有一个 value 属性用于控制输入框的值。我们需要在 value 发生变化时，同时更新输入框的值，也需要在输入框的值发生变化时，同时更新 value 的值。
基本用法
下面我们通过一个简单的示例来说明如何实现数据双向绑定。我们将创建一个名为 MyInput 的自定义元素，它有一个名为 value 的属性控制输入框的值。我们将使用一些基本的 HTML 元素，包括 input 输入框和 button 重置按钮。示例代码如下：
-- -------------------- ---- -------
--------- -----------------------
-------
----- -
-------- -------------
------- --- ----- -----
-------- -----
-
----- -
------ -----
------- ---- --
-------- ----
---------- -----
-
------ -
---------- -----
------- ----
-------- --- -----
------- -----
-------------- ----
----------------- -----
------ -----
------- --------
-
--------
-----
------ ------------- ------------
------- -----------------------------
------
-----------
--------
----- ------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - ---------------------------------------------
----- ----- - ------------------------------------- ------
--------------------------
----------- - ----------------------------------
------------ - -----------------------------------
-------------------------------------- -----------------------------
------------------------------------- -----------------------------
-
------------------ -
---------- - -------------------
---------------------- -------------------- - ------- ---------- ----
-
------------- -
---------- - ---
----------------- - ---
---------------------- ----------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
----------------- - ---------
-
-
--- ---------- -
-- --------------------------- --- ---- -
-------------------------- -----
-
-
--- ------- -
------ -------------------------- -- ---
-
-
--------------------------------- ---------
---------通过上面的代码，我们成功创建了一个名为 MyInput 的自定义元素。除了一些基本的 CSS 样式，模板中只包含一个 input 输入框和一个 button 重置按钮。在 constructor 函数中，我们将模板插入到 shadow root 中，并获取了 input 和 button 的引用，然后添加了 input 的 input 事件和 button 的 click 事件，这些事件用于进行监听元素的输入事件和数据属性的变化事件。
在 handleInput 中，我们使用 event.target.value 来获取输入框的值，并将其保存在 MyInput 的 value 属性中。然后，我们使用 CustomEvent 进行分派事件，这样我们就可以在组件外部监听 input 事件了。
在 handleReset 中，我们将输入框的值重置为空字符串，并使用 CustomEvent 分派 reset 事件。
在 observedAttributes 中，我们将 MyInput 的 value 属性添加到观察列表中，这样，当 value 属性发生变化时，我们可以捕获到这一变化。
在 attributeChangedCallback 中，我们判断属性名是否为 value，以及旧值和新值是否发生变化。如果是，我们就将输入框的值更新为新的值。
最后，我们使用 getter 和 setter 来设置和获取 value 属性的值。
实现数据双向绑定
我们成功地创建了自定义组件，但是，它并没有实现数据双向绑定。现在，我们要在 MyInput 组件中实现数据双向绑定，让输入框的值实时更新到 value 属性中，让 value 属性的变化也能同步到输入框的值上。
我们只需要在 constructor 函数中将 input 输入框的值与 value 属性进行绑定，就可以实现数据双向绑定。这里，我们需要使用一个名为 PropertyDescriptor 的函数，例如：
-- -------------------- ---- -------
----- --------------- - ----------------------------------------------------------- ---------
---------------------------------------- -------- -
----- -
------ --------------------------------------
--
-------- -
------------------------------------- -----
-------------------------- -----
--
---我们在 constructor 函数中添加了上面的代码，获取了 input 元素的 value 属性的描述符，并使用 Object.defineProperty 函数将 MyInput 中的 value 属性和 input 元素的 value 属性进行绑定。当 MyInput 中的 value 属性发生变化时，会调用 set 函数，将新的值赋值给 input 元素的 value 属性，并将相应的属性值更新到自定义元素的 value 属性上。此时，我们已经完成了数据双向绑定的实现。
结论
通过本文，我们学习了如何使用 Custom Elements 创建自定义元素，并通过一个简单的示例，介绍了如何在 Custom Elements 中实现数据的双向绑定。虽然 Demo 很简单，但通过这个例子您可以了解 Custom Elements 的基础使用方法和数据双向绑定的基本原理。希望能为您的前端工作带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efa3af6fbf960197304c4d