emit
emit メソッドを使用すると、イベントを能動的にトリガーすることができ、トリガーされたイベントにはバブリング機構があります。バブリング機構とは、イベントが内部要素から外部要素へ、内側から外側の階層に向かってイベントがトリガーされることを意味します。
以下は、emit メソッドを使用してカスタムイベントをトリガーし、バブリング機構を利用してイベントを外部要素へ伝播させる方法を示す例です：
-
I am target
-
-
この例では、<ul>要素と<li>要素にそれぞれ同じカスタムイベントcustom-eventのハンドラを登録しています。emitメソッドでイベントを発火させると、そのイベントは<li>要素から<ul>要素へバブリングし、両方のイベントハンドラが実行されます。
カスタムデータ
data パラメータを指定することで、カスタムデータをイベントハンドラーに渡すことができます：
-
I am target
-
-
この例では、data パラメータを通じてカスタムデータをイベントハンドラに渡しています。イベントハンドラは event.data を通じて渡されたデータを取得できます。
バブルしないイベントトリガー
イベントのバブリングを望まない場合は、イベントをトリガーする際に bubbles: false パラメータを指定できます：
-
I am target
-
-
この例では、bubbles: false パラメータを使用してカスタムイベントをトリガーしました。このイベントは親要素へバブリングしないため、<li> 要素のイベントハンドラのみが実行されます。
ルートノードを貫通する
デフォルトでは、イベントはカスタムコンポーネントのシャドウDOMを通過しません。しかし、composed: true を設定することで、カスタムイベントがルートノードを通過し、ルートノードの外側の要素をトリガーできるようになります。
{{loggerText}}
この例では、カスタムコンポーネント composed-test を作成しました。これは、シャドウ DOM 内の要素とイベントをトリガーするボタンを含んでいます。デフォルトでは、イベントはシャドウ DOM からルートノードに伝播しません。しかし、イベントをトリガーする際に composed: true パラメータを使用することで、イベントがルートノードに伝播し、ルートノード外の要素をトリガーしました。