知名度が低いウェブ標準ひとり Advent Calendar 2021 – 11 日目

今日は event.composedPath() です。jQuery の parents() を思い出します。

基本的な使い方

イベントが発火した要素 event.target から順に要素のパス？の根本までの要素オブジェクトを配列で返します。

el.addEventListener('click', (event) => {
  console.log(event.composedPath());
  // => [button, span#elButton, p, header, article, body, html, document, Window]
});

イベントリスナーを登録した要素 event.currentTarget ではない。

イベント用

ノードではなくイベントのメソッドなので、任意の要素のツリー情報を得る感じではないです。たぶんそういうのないよね？　while あたりで自作しましょう。

シャドウルート対応

ウェブコンポーネントのシャドウルートに対応していて、shadowRoot.mode === "closed" の場合は内側の要素を飛ばしてウェブコンポーネントの要素 <my-element> がひとつめになります。

おしまい

使いどころは何かありそうだけど、思い付きませんでした。条件に合致する直近の祖先ノードを array.find() で……いや element.closest() があるしなあ。バブリングの制御とかで使うんだろうか。

冒頭で「要素のパス？の根本」と書いたけど、ドキュメントルートの要素は <html> だしそこから document, window と取れてるのはどういう表現するのが正解なんだろう？　イベントバブリングの入れ子っぽいけど名前あるんだろうか。仕様書の path ってめっちゃ普通の単語だけどこれでいいのかな。

参考