Web Component跨组件事件监听失效：componentB无法接收componentA事件

问题描述 #

在Web Component开发中遇到跨组件事件监听失效的问题：componentB无法接收到componentA触发的自定义事件，导致console.log('ok')无法执行。即使将componentA中的this.dispatchEvent替换为document.dispatchEvent，问题依然存在，且无任何报错信息。

相关代码如下：

JavaScript代码 #

class componentA extends HTMLElement {
    connectedCallback() {
        this.dispatchEvent(new CustomEvent('custom-event', {
            bubbles: true,
            composed: true
        }));
    }
}
  
window.customElements.define('component-a', componentA);
  
class componentB extends HTMLElement {
    connectedCallback() {
        document.addEventListener('custom-event', (event) => {
            console.log('ok');
        });
    }
}

window.customElements.define('component-b', componentB);

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="logic.js"></script>
</head>
<body>
  <component-a></component-a>
  <component-b></component-b>
</body>
</html>

问题原因 #

核心问题是组件挂载顺序：HTML中<component-a>在<component-b>之前，浏览器会先执行componentA的connectedCallback触发事件，此时componentB还未完成挂载，它的connectedCallback尚未执行，自然没有注册事件监听，因此无法捕获事件。即使直接用document.dispatchEvent，触发时机依然早于componentB的监听注册，所以无效。

解决方案 #

方案1：调整HTML组件顺序 #

将<component-b>放在<component-a>前面，让componentB先完成挂载并注册监听，之后componentA再触发事件，即可正常捕获：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="logic.js"></script>
</head>
<body>
  <component-b></component-b>
  <component-a></component-a>
</body>
</html>

方案2：延迟componentA的事件触发时机 #

如果无法调整组件顺序，可在componentA的connectedCallback中延迟触发事件，确保componentB已完成挂载。推荐使用requestAnimationFrame（比setTimeout更贴合浏览器渲染周期）：

class componentA extends HTMLElement {
    connectedCallback() {
        requestAnimationFrame(() => {
            this.dispatchEvent(new CustomEvent('custom-event', {
                bubbles: true,
                composed: true
            }));
        });
    }
}

内容的提问来源于stack exchange，提问作者Antoine Iba Halin