前言
Web Components 是一种新的 Web 技术，它将 HTML、CSS 和 JavaScript 组合在一起，可以封装自定义元素、模板和 Shadow DOM。Web Components 具有可重用性、封装性和可组合性等优点，可以帮助我们更好地组织和管理 Web 应用程序。
在 Web Components 中，我们可以利用 attr 变化监听和手动触发监听来实现一些高级功能。本文将详细介绍这两种监听方式的使用方法，并给出示例代码，希望能对您有所帮助。
attr 变化监听
attr 变化监听指的是当元素的属性变化时，我们可以通过监听该属性的变化来触发一些操作。在 Web Components 中，我们可以使用 MutationObserver API 来监听元素属性的变化。
MutationObserver API 是一个异步 API，它可以监听 DOM 树中的变化，并在变化发生时触发回调函数。我们可以通过传递一个配置对象来指定需要监听的内容，包括子节点、属性、文本节点等等。
下面是一个示例代码，该代码创建了一个自定义元素 my-element，并监听了其属性 my-attr 的变化：
-- -------------------- ---- -------
----------- ---------------- --------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - --- -------------------------- -- -
-------------------------- -- -
-- -------------- --- ------------ -- ---------------------- --- ---------- -
-------------------- ------- ---- -------------------- -- ----------------------------------
-
---
---
---------------------- - ----------- ----- ------------------ ----- ---------------- ----------- ---
-
-
----------------------------------- -----------
---------上面的代码创建了一个自定义元素 my-element，并在构造函数中创建了一个 MutationObserver 对象，该对象监听了 my-element 元素的属性 my-attr 的变化。当 my-attr 属性发生变化时，回调函数会打印出该属性的旧值和新值。
在上面的代码中，我们使用了 MutationObserver 的三个配置参数：
- attributes：表示需要监听元素的属性变化。
- attributeOldValue：表示需要记录属性变化前的值。
- attributeFilter：表示需要监听的属性名称列表。
值得注意的是，attributeFilter 参数指定的属性名称列表是大小写敏感的。如果我们想监听多个属性的变化，可以将它们放在一个数组中，如下所示：
observer.observe(this, { attributes: true, attributeOldValue: true, attributeFilter: ['my-attr', 'my-other-attr'] });手动触发监听
手动触发监听指的是我们可以通过调用元素的方法来触发一些操作，而这些操作会通知到其他的监听器。在 Web Components 中，我们可以使用 CustomEvent API 来手动触发监听。
CustomEvent API 是一个异步 API，它可以创建一个自定义事件并触发它。我们可以通过传递一个事件名称和一个配置对象来创建一个自定义事件，该配置对象可以包含自定义数据、是否冒泡等信息。
下面是一个示例代码，该代码创建了一个自定义元素 my-element，并在点击该元素时触发了一个自定义事件 my-event：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
--------------------------------- ----- -- -
--------------------- --------- ---- ---- ------------------
---
-
------------------- -
------------------------------ -- -- -
----- ----- - --- ----------------------- - ------- ------ ------ ---
--------------------------
---
-
-
----------------------------------- -----------
---------上面的代码创建了一个自定义元素 my-element，并在构造函数中添加了一个 my-event 事件的监听器。当 my-event 事件被触发时，回调函数会打印出事件的 detail 数据。
在 connectedCallback 方法中，我们为 my-element 元素添加了一个 click 事件监听器。当该元素被点击时，我们创建了一个自定义事件 my-event，并通过 dispatchEvent 方法触发它。在触发事件时，我们可以传递一些自定义数据，这些数据可以在回调函数中使用。
总结
Web Components 是一种强大的 Web 技术，它可以帮助我们更好地组织和管理 Web 应用程序。在 Web Components 中，我们可以利用 attr 变化监听和手动触发监听来实现一些高级功能。本文介绍了这两种监听方式的使用方法，并给出了示例代码，希望能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65153ff295b1f8cacddaf390