Question

我有一个自定义元素my-checkbox，它包含一个复选框，标签，样式等。当切换该复选框时，我在我的构造函数中定义了一个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-checkbox的自定义元素my-checkreport，应该对＆＃34; check＆＃34;做出反应。事件。我在my-checkreport

的连接回调中定义了一个事件监听器

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

然而，这个eventListener永远不会开火，似乎永远不会听到＆＃39; ＆＃34;检查＆＃34;在my-checkbox组件中调度的事件。我尝试在构造函数中添加此侦听器并获得相同的结果。

任何想法我做错了什么？

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

Answer 1

如果您的复合元素<my-checkreport>使用Shadow DOM嵌入其内容（<my-checkbox>，标签，样式...），则来自内部元素（此处为<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的更多信息：

Answer 2

对于其他到这里结束的人，您要从影子根“ jail”中突破的特定属性是“组成”。

所以：

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

如果您愿意，还可以添加另一个属性“ detail”，该属性将携带有关事件的自定义数据。

此处有更多信息：composed property

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

2 个答案: