[css-selectors-4] Clarification needed for scoped selectors (§3.3 and §8.6)

[danburzo]

Hi, I'm having a bit of a hard time understanding the terminology in CSS Selectors Level 4 regarding scoped selectors:

• 3.3 Scoped Selectors
• 8.6 The Reference Element Pseudo-class: :scope

In particular, I find it hard to follow what is meant by scoping root vs. :scope elements in the absence of examples pointing out which is which, in something like elem.querySelector('...').

I'd love to provide more detailed suggestions on the content of the two sections, but I feel I need a mental model of what's meant in them. Could someone explain, in layman's terms, what a scoping root and a :scope element are for the commonplace DOM methods (matches/querySelector/querySelectorAll)? (I can offer my confused interpretation of things, but I doubt that would help at this point).

[Loirooriol]

So elem.querySelector('...') is defined in https://dom.spec.whatwg.org/#dom-parentnode-queryselector, it runs scope-match a selectors string '...' against elem. This basically sets elem as the scoping root when matching.

And since the :scope elements are not explicitly specified, but the selector is scoped and the scoping root is the element elem, then elem matches :scope (and nothing else matches).

It's basically the same for querySelectorAll: https://dom.spec.whatwg.org/#dom-parentnode-queryselectorall

For matches, the element is used as the :scope element but not as the scoping root.

[danburzo]

@Loirooriol Thank you for the reply! Just to make sure I got that, I'm going to paraphrase your explanation:

The DOM methods Element.querySelector(s)/Element.querySelectorAll(s) use their Element instance (this) as a scoping root.

:scope elements is a mechanism for methods invoking the match a selector against an element algorithm to override the meaning of the :scope selector, which would otherwise fall back to the scoping root, if any (:root if there's no scoping root).

In contrast to querySelector/querySelectorAll, matches() and closest() don't scope their matches to this (most obvious for closest, which needs to reach up the DOM tree), but they do want :scope to match this, and not :root.

If that's the case, my top suggestions (both of them IMHO):

• In §3.3, the Note needlessly, and prematurely, introduces the concept of :scope elements. It does not clarify anything going on in §3.3 and may better be suited in §8.6 (or even made redundant by it).

• In §8.6:

  In some contexts, selectors can be matched with an explicit set of :scope elements. This is is a (potentially empty) set of elements that provide a reference point for selectors to match against, such as that specified by the querySelector() call in [DOM].

  had introduced the confusion — the paragraph suggest elem in elem.querySelector is a :scope element, when in fact it's the scoping root. The paragraph should probably read closest() instead? Edit: Or did I get the meaning totally wrong, and querySelectorAll() is meant as an analogy for providing a reference point to match selectors against?