如何在父Web Component中监听子组件Shadow DOM内触发的事件？

这个问题其实挺常见的，毕竟Web Component的Shadow DOM默认是隔离的，想要跨组件通信得用点小技巧。核心思路是让列表项组件派发一个能穿透Shadow DOM的自定义事件，然后在容器组件中监听这个事件就行，具体步骤如下：

1. 在<custom-list-item>中派发自定义事件 #

当按钮被点击时，我们需要主动向外派发一个自定义事件，并且要配置事件允许冒泡、能穿透Shadow DOM边界，这样父组件才能捕获到它。

示例代码：

class CustomListItem extends HTMLElement {
  constructor() {
    super();
    // 开启Shadow DOM
    this.attachShadow({ mode: 'open' });
    // 渲染组件内容
    this.shadowRoot.innerHTML = `
      <style>
        button { padding: 8px 16px; cursor: pointer; }
      </style>
      <button>操作按钮</button>
    `;

    // 给Shadow DOM内的按钮绑定点击事件
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      // 派发自定义事件，配置关键参数
      this.dispatchEvent(new CustomEvent('item-button-click', {
        bubbles: true,        // 允许事件向上冒泡
        composed: true,       // 允许事件穿透Shadow DOM到主DOM树
        detail: {             // 可选：传递额外数据，比如当前项的ID、内容等
          itemId: this.dataset.itemId,
          content: this.textContent
        }
      }));
    });
  }
}
customElements.define('custom-list-item', CustomListItem);

2. 在<custom-list>中监听自定义事件 #

因为我们配置了事件可以冒泡，所以直接在<custom-list>元素本身上监听这个自定义事件即可，哪怕子项是动态添加的，也能自动捕获到事件。

示例代码：

class CustomList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 使用slot容纳所有子列表项
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; border: 1px solid #eee; padding: 10px; }
      </style>
      <slot></slot>
    `;
  }

  connectedCallback() {
    // 监听列表项派发的自定义事件
    this.addEventListener('item-button-click', (event) => {
      console.log('捕获到列表项按钮点击：', event.detail);
      // 这里可以写你的业务逻辑，比如删除项、修改状态等
      alert(`你点击了ID为${event.detail.itemId}的列表项按钮`);
    });
  }
}
customElements.define('custom-list', CustomList);

关键参数说明 #

• bubbles: true：让事件可以沿着DOM树向上冒泡，这样父元素能接收到事件
• composed: true：突破Shadow DOM的隔离限制，让事件能从Shadow DOM内部传递到外部的主DOM树中
• detail：用来携带自定义数据的字段，你可以把当前列表项的任何信息放在这里，方便父组件处理

备用方案：直接监听子元素（不推荐） #

如果不想用事件冒泡，也可以在<custom-list>中遍历所有子<custom-list-item>，逐个绑定事件监听，但这种方式的缺点是动态添加的子项需要重新绑定，不如冒泡方案灵活。示例代码：

// 在custom-list的connectedCallback中
this.querySelectorAll('custom-list-item').forEach(item => {
  item.addEventListener('item-button-click', (event) => {
    // 处理逻辑
  });
});

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