emit
emit メソッドを使用すると、イベントを自発的にトリガーでき、トリガーされたイベントにはバブリングメカニズムがあります。バブリングメカニズムとは、イベントが内部要素から外部要素へ、内側から外側の階層に沿ってイベントをトリガーすることを意味します。
以下は、emit メソッドを使ってカスタムイベントを発火し、バブリング機構を利用して外側の要素にイベントを伝える例です：
-
I am target
-
-
この例では、<ul> 要素と <li> 要素にそれぞれ同じカスタムイベント custom-event のハンドラを登録しています。emit メソッドでイベントをトリガーすると、そのイベントが <li> 要素から <ul> 要素にバブリングし、2つのイベントハンドラが実行されます。
カスタムデータ
data パラメータを指定することで、カスタムデータをイベントハンドラに渡すことができます：
-
私はターゲットです
-
-
この例では、data パラメータを介してカスタムデータをイベントハンドラに渡しています。イベントハンドラは event.data を介して渡されたデータを取得できます。
バブリングを発生させないイベント
イベントのバブリングを防ぎたい場合は、イベントをトリガーする際に bubbles: false パラメータを指定します：
-
I am target
-
-
在这个示例中，我们使用 bubbles: false 参数触发了自定义事件。这个事件不会冒泡到上层元素，所以只有 <li> 元素的事件处理程序被触发。
ルートノードの貫通
デフォルトでは、イベントはカスタムコンポーネントのシャドーDOMを貫通しません。しかし、composed: true を設定することで、カスタムイベントがルートノードを貫通し、ルートノードの外側の要素をトリガーさせることができます。
{{loggerText}}
この例では、カスタムコンポーネント composed-test を作成しました。このコンポーネントは、シャドウ DOM 内の要素と、イベントをトリガーするボタンを含んでいます。デフォルトでは、イベントはシャドウ DOM を越えてルートノードに到達しません。しかし、イベントをトリガーする際に composed: true パラメータを使用することで、イベントがルートノードまで透過し、ルートノード外の要素をトリガーするようにしています。