はじめに

あるDOM要素を起点に querySelector をして、その直下の要素だけを取得したいと思いました。
まずは、素直にこのように書いたのですが、これはエラーになったのでどうすればいいのかな？という話です。

var select = document.querySelector('select.foo');
// "> option" は CSS セレクタの構文として誤っており、エラーになる
select.querySelectorAll('> option');

結論

var select = document.querySelector('select.foo');

// 自身を含んだセレクタを記述できる
select.querySelectorAll('select.foo > option');

// また、ブラウザサポート範囲は不明だが :scope 擬似セレクタ
select.querySelectorAll(':scope > option');

検証

このような HTML を用意し、

<!DOCTYPE html>
<html>
  <body>
    <ul class="list1">
      <li class="item1">list1-item1</li>
    </ul>
    <ul class="list2">
      <li class="item1">list2-item1</li>
      <li class="item2">list2-item2</li>
    </ul>
  </body>
</html>

Chrome の Console で要素抽出をしてみる。

全体から .item1 を抽出：

document.querySelectorAll('.item1')
> [<li class="item1">list1-item1</li>, <li class="item1">list2-item1</li>]

.list1 を起点に .item1 を抽出：

document.querySelector('.list1').querySelectorAll('.item1')
> [<li class="item1">list1-item1</li>]

.list1 を起点に .list1 .item1 を抽出：

document.querySelector('.list1').querySelectorAll('.list1 .item1')
> [<li class="item1">list1-item1</li>]

.list1 を起点に :scope .item1 を抽出：

document.querySelector('.list1').querySelectorAll(':scope .item1')
> [<li class="item1">list1-item1</li>]

.list1 を起点に .list2 .item1 を抽出：

document.querySelector('.list1').querySelectorAll('.list2 .item1')
> []

参考

ルート以外からの querySelector の意外な動き
Selectors Level 4 - 7.5. The contextual reference element pseudo-class :scope
https://twitter.com/gtk2k/status/748355841393192961 (Twitter経由でいただいたコメント)