CSSの:scopeとは

セレクタ―が作用する基点を示す

:scopeとは

セレクタ―が作用する基点の代理のシンボルのようなもの。

要素のscopeを定義する方法がまだ無いようなので、css上の使用では、:rootと同じです。

しかし、JavaScript上で使用した場合は、querySelector()等を発行する要素自体を示します。

セレクタ―の文字列として、:scope を使用できます。

var context = document.getElementById('context');
var selected = context.querySelectorAll(':scope > div');

Sample.

element.matches(selector)…要素がセレクタ―にマッチするか。

element.matches(“:scope”)…私は私ですかと確認しているような感じでしょうか。

if (ele.matches(":scope")) {
    result = ":scopeです。この要素は自分自身のスコープ内にあります";
}

Memo.JavaScript.

mdnのJavaScriptの例がJavaScriptの参考になるなと思いました。

var context = document.getElementById('context');
var selected = context.querySelectorAll(':scope > div');

document.getElementById('results').innerHTML = Array.prototype
  .map.call(selected, function (e) { return '#' + e.getAttribute('id');})
  .join(', ');

id=context直下のdivを検索して、そのdivのid名の頭に#を付けて、出力する。

.map.call()は、配列で出力するための記述のようです。