如何監聽自定義事件定義的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
});

如果您願意，還可以添加另一個屬性“詳細信息”，該屬性將包含事件的自定義數據。

更多信息在這里： 組成的財產