如何监听自定义事件定义的Web组件

Question

我有一个自定义元素my-checkbox ，它包含一个复选框，标签，样式等。当切换该复选框时，我在我的构造函数中定义一个名为check的CustomEvent ，如下所示：

constructor(){
   super();
   this._shadowRoot = this.attachShadow({mode: 'open'});
   this.checkEvent = new CustomEvent("check", {
     bubbles: true,
     cancelable: false,
   });
 }

切换复选框时，我会调度该事件：

toggleCheckbox(){
  this.dispatchEvent(this.checkEvent);
  console.log(this.checkEvent);
  ...
}

我推断这个事件正在被调度，因为console.log的内容显示了CustomEvent的签名

我有另一个自定义元素my-checkreport ，其中包含my-checkbox，应该对“check”事件作出反应。 我在my-checkreport的连接回调中定义了一个事件监听my-checkreport

connectedCallback(){
  ...
  this.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

但是，这个eventListener永远不会触发，似乎永远不会“听到” my-checkbox组件中调度的“check”事件。 我已经尝试在构造函数中添加此侦听器，但结果相同。

我有什么想法我做错了吗？

背景：我这样做是为了使这些元素可以组合。 我还读过，开发Web组件的最佳实践是“使用自定义事件将信息传递出组件......”

Answer 1

如果复合元素<my-checkreport>使用Shadow DOM嵌入其内容（ <my-checkbox> ，label，样式...），则内部元素（此处为<my-checkbox> ）的调度事件将在内部触发（容器的）Shadow DOM。

因此，您应该将事件侦听器添加到复合自定义元素（ this._shadowRoot ）的Shadow DOM根目录中，而不是添加到元素（ this ）本身。 在<my-checkreport> ：

connectedCallback(){
  ...
  this._shadowRoot.addEventListener("check", function (e) {
        console.log('listend to check event');
        console.log(e);
    });
 }

有关Shadow DOM的更多信息：

• 初学者： Eric Bidelman的演讲
• 好总结： Hayato Ito的综合
• 规格： W3C工作草案
• 所以： 问答

Answer 2

对于那些最终到达这里的人来说，你正在寻找的特定属性是打破阴影根“监狱”的“组成”。

所以：

this.checkEvent = new CustomEvent("check", {
  bubbles: true,
  cancelable: false,
  composed: true
});

如果您愿意，还可以添加另一个属性“详细信息”，该属性将包含事件的自定义数据。

更多信息在这里： 组成的财产