Web Components 是一种新兴的 Web 技术，它允许开发者将 UI 组件封装为独立的、可重用的模块，使得应用代码更加可维护、可扩展、可测试。其中，"ref" 属性是 Web Components 中非常重要的一个概念，它允许我们通过 JavaScript 代码引用 Web Components 实例中的元素，但是如何监听元素的 "ref" 属性的变化呢？本文将从实际需求和技术原理两个方面进行详细的讲解和实践。
实际需求：监听表单项的选中状态
假设我们正在开发一个任务清单应用，其中有一个 "完成任务" 的功能。为了实现这个功能，我们需要监听表单中每一个任务项的选中状态，并将已选中的任务项显示在列表中。可以这样设计组件：
<todo-form> <input type="checkbox" ref="checkbox1"> buy groceries <input type="checkbox" ref="checkbox2"> do laundry <input type="checkbox" ref="checkbox3"> clean house ... </todo-form> <todo-list></todo-list>
在上述代码中，我们定义了一个 "todo-form" 组件，其中有若干个带有 "ref" 属性的复选框元素，每个 "ref" 属性都绑定了唯一的元素引用。另外，我们还定义了一个 "todo-list" 组件，它的作用是显示已选中的任务项列表。
技术原理：使用 "MutationObserver" 监听元素变化
Web Components 中，每个元素实例都处于自己的 Shadow DOM 中，因此标准的 DOM 监听事件是无法跨 Shadow DOM 边界的。但是，我们可以使用 "MutationObserver" 接口来监听元素的变化。该接口允许我们监视元素的属性、子元素、文本内容等变化，并在变化发生时触发回调函数。
在这个例子中，我们可以使用如下代码对每个复选框元素进行监听：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------------- -
------------- - --- ------------------------------- -- -
------------------------------- -- -
-- -------------- --- ------------ --
---------------------- --- ---------- -
-- --- --------- ------
---------------------- ---------------------------- -
------- -
----- ------------------------------------
-------- ------------------------
-
----
-
---
---
-- -------- --------- --
---------------------------------------------------------------- -- -
------------------------------- - ----------- ---- ---
---
-
---------------------- -
-- ----
---------------------------
-
-上述代码中，我们首先构造了一个 "MutationObserver" 实例，并传入一个回调函数。每当被监听的元素发生变化时，该回调函数会被触发，并传入一个参数 "mutationList"，该参数是一个 MutationRecord 对象数组，表示发生的变化列表。我们在回调函数中遍历变化列表，检查变化形式是否为 "attributes"， 是否为 "checked" 属性，并根据元素的 "ref" 属性和 "checked" 属性生成一个自定义事件 "todo-selected"，并将其通过 "dispatchEvent" 方法向外派发。
在 "connectCallback" 回调函数中，我们首先遍历所有的复选框元素，并使用 "observe" 方法将其加入到 "MutationObserver" 中进行监听。这样，当表单项选中状态发生变化时，都会通过 "MutationObserver" 被监听到，并触发我们自定义的 "todo-selected" 事件。
如果我们需要在 "todo-list" 组件中处理 "todo-selected" 事件，可以使用如下代码监听该事件：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------------- -
-- -- --------------- --
-------------------------------------- ------- -- -
-- ------
----- ------- - ------------------
----- ------- - ---------------------
-- -----------
-- --------- -
----- ---- - -----------------------------
---------------- - --------
-----------------------
- ---- -
------------------------------------------ -- -
-- ----------------- --- -------- -
--------------
-
---
-
---
-
-总结
本文主要介绍了 Web Components 中如何监听元素的 "ref" 属性的变化，其实质是利用了 "MutationObserver" 接口，跨 Shadow DOM 边界进行监听，并触发自定义事件进行逻辑处理。Web Components 的前景非常广阔，是 Web 开发的重要方向和趋势。对于 Web 开发者来说，深入学习 Web Components 技术可以提升自己的技术水平和竞争力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517bd3e95b1f8cacdfe6624