我如何才能占据影子 dom javascript 中的更改事件

Question

我如何在 shadow dom javascript（web 组件）中传播更改事件，因为当我以这种方式尝试时，我进入了一个循环。 我的想法是该事件被称为更改（因为如果我更改它的名称，例如 change1 它可以工作）我该如何解决我的问题？ 谢谢

我的代码

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this._shadow = this.attachShadow({ mode: 'open' });

    this._shadow.addEventListener('change', function(e){
      this._shadow.dispatchEvent(new Event('change', {bubbles: true,composed: true}));
    });
     
  }
}
customElements.define('my-component', MyComponent);

然后我希望我的组件占用更改事件，即当我进入循环时

document.getElementById("my-component").addEventListener("change",function(){
  console.log("example")
})
 

这是循环

>   Uncaught RangeError: Maximum call stack size exceeded.
>             at ShadowRoot.<anonymous> 
>             at ShadowRoot.<anonymous>

Answer 1

您正在同一元素上附加和调度change事件。

那是你的无尽循环

    this._shadow.addEventListener('change', function(e){
      this._shadow.dispatchEvent(new Event('change', {bubbles: true,composed: true}));
    });```