querySelectorでelement直下の要素を指定する

結論

CSSの疑似セレクタ :scopeと、直下の要素のみを指定する > を組み合わせて使いましょう。
例: someElement.querySelector(":scope > .someChild")

補足

以下のような入れ子構造を持つリストを仮定します。

<ul id="parent">
    <li> item1 </li>
    <li> item2 </li>
    <li> item3
        <ul>
            <li> item3-1 </li>
            <li> item3-2 </li>
        </ul>
    </li>
</li>

このリストの一番外側の ul を指す HTMLUlElement が与えられた時、以下のように querySelectorAll のセレクタを指定すれば、直下にある li のみを取得できます。

const ulElement = document.querySelector("ul#parent");
// item1, item2, item3 のみ取得され、 item3-1, item3-2 は除外
const liElements = ulElement.querySelectorAll(":scope > li");