web-dev-qa-db-ja.com

カスタムイベント定義のWebコンポーネントをリッスンする方法

チェックボックス、ラベル、スタイルなどをラップするカスタム要素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を含み、「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コンポーネントを開発するためのベストプラクティスは「カスタムイベントを使用してコンポーネントから情報を渡す...」であると読みました。

javascriptdomweb-componentshadow-domcustom-element
10
rakitin

複合要素の場合<my-checkreport>はShadow DOMを使用してコンテンツを埋め込みます（<my-checkbox>、label、styling ...）、内部要素からディスパッチされたイベント（ここでは<my-checkbox>）（コンテナの）Shadow DOM内で発生します。

したがって、複合カスタム要素のシャドウDOMのルートにイベントリスナーを追加する必要があります（this.shadowRoot）要素（this）自体ではなく。 <my-checkreport>：

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

Shadow DOMの詳細：

17
Supersharp

ここで終わる他の人にとって、シャドウルート「刑務所」から抜け出すために探している特定のプロパティは「構成されています」。

そう：

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

必要に応じて、イベントのカスタムデータを保持する別のプロパティ「detail」を追加することもできます。

詳細はこちら： 構成プロパティ

12
Clayton Gulick