Web Components 是用于创建可重用的自定义元素的技术。它由三个技术组成：自定义元素、影子 DOM 和 HTML 模块。自定义元素允许开发人员创建自己的 HTML 标签，影子 DOM 允许封装样式和 DOM，HTML 模块是一种使用 template 标记的新的 HTML 导入方法。
而 Mutation Observers 是 Web APIs 中的一个特性，它可以监听某个节点（Node）的子节点（Subtree）及其属性的变化。它可以被用于监听 Web Components 中的变化，进而实现一些有趣的效果。
如何使用 Mutation Observers 监听组件变化？
在使用 Mutation Observers 监听 Web Components 的变化时，需要了解下面几个 API：
MutationObserver
MutationObserver 用于创建一个新的观察者对象，并指定被观察的节点及其监听函数。
const observer = new MutationObserver(callback);
MutationObserverInit
MutationObserverInit 是一个用于配置观察者对象的选项的接口。
{
childList: true, // 是否监听子节点的变化
attributes: true, // 是否监听节点的属性变化
subtree: true, // 是否监听给定节点的整个子树
attributeFilter: ['attr1', 'attr2'] // 需要监听的属性列表
}MutationRecord
MutationRecord 是一个包含关于节点变化的信息的对象。
-- -------------------- ---- ------- - ----- ----------- - ------------ - ---------------- ------- ----- -- ------- ----------- --------- -- ----- ------------- --------- -- ----- ---------------- ----- -- ------ ------------ ----- -- ------ -------------- ------- -- ------ --------- ------- -- ------- -
当需要监听 Web Components 的变化时，我们可以通过下面的方法来实现：
-- -------------------- ---- -------
-- ---------
----- -------- ------- ----------- -
-- ----
------------- -
--------
-- ------ ---
----- ------ - ------------------------ ---------
-- --------
----- ------ - ---------------------------------
-- ----------
----------------------- - --------
------------------ - ------ ----
-- -------- --- -
---------------------------
-- -- ---------------- ---- --- ---
----- -------- - --- -------------------------- -- -
-------------------------- -- -
----------------------
---
---
-- ------ --- ---
------------------------ -
---------- -----
----------- -----
-------- -----
---------------- ---------
---
-
-
-- -------
---------------------------------- ----------上面的代码中，我们定义了一个名为 MyButton 的自定义元素，它创建了一个绿色的按钮，并在构造函数中创建了一个 MutationObserver，并开始监听影子 DOM 变化。MutationObserver 的回调函数会在影子 DOM 的任何变化时被调用，并打印变化信息。
总结
Mutation Observers 提供了一种方便的方法来监听 Web Components 的变化并在变化时执行相应的代码。它可以让开发人员轻松地创建动态的、交互式的 Web 应用程序。在实际开发中，我们可以根据自己的需求来定制 MutationObserver 的选项，以监听我们需要的节点的变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d04da6b5eee0b525743a51