Shadow DOMのclickイベントを取得する

Shadow DOMの要素がクリックされたことを記録することになり、試行錯誤した記録です。

記録する対象はrss-listという名前のコンポーネントです。 イベントを記録するrecoreEvent関数へevent変数を渡していますが、event変数の中身がShadow DOMとなっておりクリックされた要素を取得することができません。

const onClick = (event) => {
    recordEvent(event);  // #shadow-root
};
document.querySelector('rss-list').addEventListener('click', onClick);

そこで、以下を参照に実装を行いました。 composedPath()でイベントが通過したパスを取得し、クリックされた要素がShadow DOM内にあるかチェックを行うに変更しました。

www.simoahava.com

const onClick = (event) => {
    if ('composed' in event && typeof event.composedPath === 'function') {
      const path = event.composedPath();
      const targetElement = path[0];
      const shadowFound = path.length ? path.filter((i) => !targetElement.shadowRoot && !!i.shadowRoot).length > 0 : false;
      if (!targetElement || !targetElement.tagName) {
        return;
      }
      if (!shadowFound) {
        return;
      }
      recordEvent(targetElement);  // <a />
    }
};
document.querySelector('rss-list').addEventListener('click', onClick);

これで、Shadow DOMのclickイベントを取得することが出来るようになりました。