我如何才能占據影子 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}));
    });```