how can i occupy the change event in shadow dom javascript

estudiante 0
Viewed 19

how could I propagate the change event in shadow dom javascript(web component), because when I try it this way I get into a loop. My idea is that the event is called change (because if I change its name, for example change1 it works) How could I solve my problem? thanks

My code

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);

then I want my component to occupy the change event and that is when I enter the loop

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

this is the loop

>   Uncaught RangeError: Maximum call stack size exceeded.
>             at ShadowRoot.<anonymous> 
>             at ShadowRoot.<anonymous>
native-web-component dom-events shadow-dom dom javascript
1 Answers

You are attaching and dispatching a change Event on the same element.

That is your endlesssss loop

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