document.querySelectorAll のショートハンド関数。NodeList じゃなくて配列で返してくれます。::shadow に自前対応済み！

q.js

// const q = (s,r)=>[...(r||document).querySelectorAll(s)];

const q = (selector,root) =>
  selector.split(/::shadow\s*/)
    .reduce((parents,selector,idx) =>
      parents.flatMap(parent =>
        selector=="" ? (idx==0?parent:parent.shadowRoot) : [...(idx==0?parent:parent.shadowRoot).querySelectorAll(selector)]
      )
      , [root||document]
    )

昔は querySelectorAll のセレクタで custom-tag::shadow h1 とか書けばカスタムエレメント内のDOMも一発で走査できたのに、Chrome のどこかのバージョンから ::shadow が null を返すようになって一発で引っ張れなくなってしまったので自分用にコピペで使ってた便利関数を修正した 。

基本的には querySelectorAll のショートハンドな感じでCSSセレクタを引数にすると配列で返してくれる奴です。

ユーザスクリプトとかで元々 querySelector じゃなくこの q を使ってたので、コピペ用の関数定義だけ差し替えるだけで ::shadow 問題が一発で解決してくれて幸いだった。

あ、自分は使ってなかったので漏れてたけどカンマ区切りセレクタには未対応だね。対応は難しくないけどまーいいや。

::shadow が深すぎて面倒なとき用の奴も作った（作り途中）
https://gist.github.com/kawaz/391d03249c20286ce965e198e87ec356