[selectors][css-nesting] Move nest-containing and nest-prefixed selector definitions to Selectors

[LeaVerou]

Nest-prefixed: https://drafts.csswg.org/css-nesting/#nest-prefixed
Nest-containing: https://drafts.csswg.org/css-nesting/#nest-containing

These types of relative selectors are useful beyond nesting, as the ampersand can become a universal CSS this equivalent. E.g. I can imagine a qSA-like JS API that allows us to do things like input.find("& + label") or even compositions like find("&.foo", "& > .bar", ".baz"), or even HTML attributes that allow us to refer to elements relative to the current element (how useful that would have been with label[for]!)

Sure, there is also :scope, but there’s a reason we didn't base nesting off that.

[Loirooriol]

So & would behave as :scope (but without falling back to :root, I guess)? Or maybe each JS API would define what & means?

[LeaVerou]

So & would behave as :scope (but without falling back to :root, I guess)? Or maybe each JS API would define what & means?

I suppose each API could define what it means. It could default to :scope for APIs that don't define anything.

[fantasai]

Discussing with @LeaVerou, @jensimmons, @bradkemper, @tabatkins, and @mirisuzanne today, we all agree that making & have meaning outside of nested context is a good idea, as it makes selectors containing these portable between nested context, regular context, and @scope contexts.

The definition would basically be, within nested context it refers to the nesting selector, and otherwise it's an alias for :scope. IIRC this expands to the following consequences:

• Within nested context, it refers to the nesting element
• Within @scope context, it refer to the scope root
• In shadow DOM style sheets it matches the shadow root element
• In .querySelector it matches the context element
• Outside of any more specific context, it matches :root

Open questions:

• Should it do anything special anywhere else, e.g. in :has(), which also takes relative selectors?
• If not, should :scope and & be syntactic aliases (i.e. make :scope expand out the same as & in nested contexts) or should they differ in some cases (nested selectors, or other cases)?

[mirisuzanne]

I think there's a missing context there. At the root level of the document, & refers to the document :root?

[tabatkins]

Yup, that last bulllet point seems to have been

[fantasai]

Edited. Thanks. :)

[mirisuzanne]

We didn't discuss it today, but I think it would make sense to also clarify in @scope that the root selector is a relative selector when @scope is nested:

.media {
  /* elements matching `.media .h-card` act as a scope root */
  @scope (.h-card) {
    img { object-fit: cover; }
  }

  /* elements matching `.media` act as a scope root */
  @scope (&) {
    img { object-fit: cover; }
  }
}

[romainmenke]

The definition would basically be, within nested context it refers to the nesting selector, and otherwise it's an alias for :scope. IIRC this expands to the following consequences:

Within nested context, it refers to the nesting element

If not, should :scope and & be syntactic aliases (i.e. make :scope expand out the same as & in nested contexts) or should they differ in some cases (nested selectors, or other cases)?

• & : any element that would be matched by the selector of the enclosing rule (i.e. :is(...))
• :scope either a true element or a virtual one

I think this is too different and making them aliases would be confusing.

& + & vs. :scope + :scope