Shadow DOM中Web Component的change事件传播循环问题求解

问题重现 #

在Web Component的Shadow DOM中尝试传播change事件时，出现栈溢出循环错误。相关代码及错误信息如下：

组件实现代码 #

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.
at ShadowRoot.

问题原因 #

你在ShadowRoot上监听了change事件，当内部元素触发原生change事件后，监听函数会在ShadowRoot上重新派发一个新的change事件。由于这个新事件设置了composed: true，它会穿透Shadow DOM向外传播，但同时这个新事件也会被ShadowRoot的change监听器再次捕获（事件传播机制导致），进而触发新一轮的事件派发，形成无限循环，最终导致栈溢出。

解决方案 #

方案1：从组件实例而非ShadowRoot派发事件 #

将事件的派发对象从this._shadow改为组件实例this，这样新派发的事件会直接向外传播到DOM树，不会被ShadowRoot的监听器捕获，从而避免循环：

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

    this._shadow.addEventListener('change', (e) => {
      // 从组件实例本身派发事件
      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    });
  }
}
customElements.define('my-component', MyComponent);

方案2：精准监听内部具体元素 #

如果Shadow DOM内有明确的触发元素（如<input>、<select>），直接给该元素添加change监听，而非监听整个ShadowRoot，可以进一步避免不必要的事件捕获：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this._shadow = this.attachShadow({ mode: 'open' });
    
    // 创建内部输入元素示例
    const input = document.createElement('input');
    input.type = 'text';
    this._shadow.appendChild(input);

    // 直接监听内部元素的change事件
    input.addEventListener('change', (e) => {
      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
    });
  }
}
customElements.define('my-component', MyComponent);

方案3：给自定义事件添加标识并过滤 #

通过CustomEvent的detail字段添加自定义标识，在监听函数中过滤掉自身派发的事件：

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

    this._shadow.addEventListener('change', (e) => {
      // 过滤掉自身派发的事件
      if (e.detail?.isCustom) return;
      
      // 派发带标识的自定义事件
      this.dispatchEvent(new CustomEvent('change', { 
        bubbles: true, 
        composed: true,
        detail: { isCustom: true }
      }));
    });
  }
}
customElements.define('my-component', MyComponent);

内容的提问来源于stack exchange，提问作者estudiante