[css-cascade-6] Scoping the subject of a `:has()` selector

[mirisuzanne]

This issue was raised on social media by @mayank99. The goal is to select a scope that has a given element in scope. However, since @scope only requires the 'subject' to be in-scope, and the contents of has are not selecting the subject, there is not currently any way to achieve this.

Here's a code-pen for experimenting.

It seems like this might be solvable (though not elegant) with a :scope-end selector (already proposed in another thread) that matches lower boundary elements:

@scope (my-scope) to (my-scope) {
  :scope:has(a:not(:scope-end a)) { … }
}

(You can get close to that solution by replacing :scope-end with my-scope - but it becomes fragile with further nesting.)

Since this issue seems specific to the :has() selector, the other approach might be changes on that end:

• Add a :scope-has() selector that does a scoped version of the same thing. It's clear and to the point, but maybe a bit of a special case?
• Resolve :has() differently when it's used on the :scope() selector. This is even more of a heuristic special case, but it really gets to the point of the issue. We want to know if the scope has something.

Other ideas?

The relevant spec text is:

Their selectors can only match elements that are in scope. (This only applies to the subject; the rest of the selector can match unrestricted.)

[mirisuzanne]

It does seem to me like this should work actually? What am I missing?

@scope (section) to (section) {
  :scope:has(a:not(:scope section *)) {
    background: lavender;
  }
}

(at least in Chrome, this does not currently select anything - but I'm not clear why)

[kizu]

@mirisuzanne
(at least in Chrome, this does not currently select anything - but I'm not clear why)

I wonder if this is just a bug with :scope inside functional pseudo-classes? I did report recently a similar one with :scope inside :is(), so maybe it will be worth it reporting this as well: https://bugs.chromium.org/p/chromium/issues/detail?id=1512217

[mayank99]

:scope:has(a) working out-of-the-box might make sense for this particular example.

@scope (my-scope) to (my-scope) {
  :scope:has(a) {
    /* … only match if `a` is within scope */
  }
}

But there might be cases where you'd want the current unscoped behavior. If it's easy to opt in/out of one or the other behavior, it should be fine?

Maybe to opt out, the rule should just be written outside of @scope by itself. Although I do want to mention that nonstandard userland implementations of scoping provide a way to "bail out". For example, CSS Modules provides a :global() selector. This is useful when you want part of the selector to be within the scope and other parts to match globally.

@scope (my-scope) to (my-scope) {
  :scope:has(:global(a)) {
    /* … use default unscoped :has behavior */
  }
}

I also like the :scope-end selector. It could probably be useful for other cases that we haven't thought of yet. Although, since the lower boundary itself is excluded from the scope, maybe that limits its usefulness.

---

It does seem to me like this should work actually? What am I missing?

@scope (section) to (section) {
  :scope:has(a:not(:scope section *)) {
    background: lavender;
  }
}

Wouldn't it break with further nesting, for example, five levels of nested <section>s?

[mirisuzanne]

Wouldn't it break with further nesting, for example, five levels of nested <section>s?

It shouldn't, since :scope always refers to the active scope-root, and won't match other potential scopes. That's the difference between :scope or & in this context. The ampersand represents the scope-selector (and could match out-of-scope sections in this context) - but there is only ever a single relevant matched :scope root for a scoped selector.

[kizu]

In #9740 it was brought up that there is a similar case, where you could have something like .foo :scope .bar, or, likely more often, :scope .bar:is(.foo *), where we'd want to clarify that this .foo should be “in scope”.

I propose to introduce something like a :in-scope pseudo-class, which could be then used with any selectors, and will only match for elements that are inside the current scope.

The example from the OP will be then

@scope (my-scope) to (my-scope) {
  :scope:has(a:in-scope) { … }
}

[mayank99]

So :in-scope would be an opt-in way to limit any part of the selector to the scope. This is somewhat similar to CSS Modules :local() references.

There is some potential for confusion as you'd have to figure out which parts of the selector are automatically in scope and which ones need :in-scope. But I think authors could get used to it.

Do we also need something like :out-of-scope? Maybe not, since only the subject of the selector is required to be within scope. e.g. html :scope will automatically match.

[kizu]

There is some potential for confusion as you'd have to figure out which parts of the selector are automatically in scope and which ones need :in-scope. But I think authors could get used to it.

I think right now the only rule is that only the subject is required to be always in scope (well, and the :scope itself, of course), otherwise any other parts can be anywhere really.

Do we also need something like :out-of-scope? Maybe not, since only the subject of the selector is required to be within scope. e.g. html :scope will automatically match.

I don't think there are many use cases for this, and we could do :not(:in-scope) if we'll need this for anything. Although, maybe it could still be useful to introduce a “negative” version, but I don't remember where we stand on this currently.