Custom Element 是 Web Components 规范中的一部分，它允许开发者创建自定义的 HTML 元素。每个 Custom Element 实例都具有自己的生命周期和行为。在实现 Custom Element 的过程中，我们需要添加事件侦听器来响应元素上的事件。但是，如何为每个 Custom Element 实例添加事件侦听器呢？
解决方案
为了为每个 Custom Element 实例添加事件侦听器，我们可以使用 Shadow Dom。每个 Custom Element 实例都有自己的 Shadow Dom，Shadow Dom 中的事件不会向上冒泡到其父级元素。这意味着每个 Custom Element 实例可以拥有自己的事件侦听器，而不会影响其他实例。
具体步骤如下：
步骤一：为 Custom Element 创建 Shadow Dom
我们可以使用 Custom Element 的生命周期方法 connectedCallback 来创建 Shadow Dom。在 connectedCallback 方法中，我们可以使用 this.attachShadow({mode: 'open'}) 方法来创建一个开放的 Shadow Dom。
class MyElement extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
}
}步骤二：为 Shadow Dom 中的元素添加事件侦听器
在 Shadow Dom 中创建元素，并为其添加事件侦听器。这样我们就能够为每个 Custom Element 实例添加自己的事件侦听器了。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
------------------------ ---------
----- ------ - ---------------------------------
------------------ - ------ -----
-------------------------------- -- -- -
------------------- -----------
---
------------------------------------
-
-示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ---- ----- ----------------
-------
------
-------------------------
-------------------------
--------
----- --------- ------- ----------- -
------------------- -
------------------------ ---------
----- ------ - ---------------------------------
------------------ - ------ -----
-------------------------------- -- -- -
------------------- -----------
---
------------------------------------
-
-
----------------------------------- -----------
---------
-------
-------在这个示例中，我们定义了一个 MyElement 类，继承自 HTMLElement，并实现了 connectedCallback 方法，用于创建 Shadow Dom，并在其中添加一个按钮元素和相应的事件侦听器。我们在 HTML 中定义了两个 my-element 元素，这意味着我们将创建两个 Custom Element 实例，每个实例都有自己的事件侦听器。
结论
使用 Shadow Dom 可以为每个 Custom Element 实例添加自己的事件侦听器。这使得我们可以更好地控制每个实例的行为，而不会影响其他实例。通过遵循上述步骤，我们可以轻松地为每个 Custom Element 实例添加事件侦听器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773bd6c6d66e0f9aae71a96