Add ::top-layer pseudo element

[rejhgadellaa]

This is a continuation of #7319.

I request that a ::top-layer pseudo element is added. As Bramus proposed:

What if we had a top-layer pseudo element, i.e. ::top-layer? It would be a pseudo-element that’s only available on the html element.

You wouldn’t use it (or be able) to style the top-layer itself, but could use it to target elements that are inside the top-layer by use of a combinator, e.g.

::top-layer * = All elements that appear in the top-layer
::top-layer dialog = Only dialog elements that appear in the top-layer

With this, it would also be possible to target the top-most element or even the top-most dialog, as detailed here.

:nth-last-child(1 of ::top-layer dialog) {
  /* topmost modal dialog in the top-layer, yay! */
}

This would require for ::top-layer to report its (virtual) children in the order in which they got added, though. This is info which I suppose is internally already available, because otherwise top-layer wouldn’t be able to stack it’s contents properly.

Bramus, #7319

I've created a codepen that demonstrates a use case for being able select the top-most <dialog /> and prevent 'stacking' of multiple ::backdrops:

https://codepen.io/rejh/pen/LYKPvNr

Thank you!

Edit: CC @bramus

[tabatkins]

Having it be a pseudo-element with children seems a little more complex than needed, I think? I think we can get the same functionality with a pseudo-class that matches elements in the top-layer list. We can make it functional as well, taking an an+b argument selecting based on top-layer index.

That is, dialog:top-layer would match when the dialog was in the top layer; dialog:top-layer(last 1) would match the last one in the list (which is topmost).

Am I missing something that makes this not work?

[rejhgadellaa]

I think that the benefit of going with a pseudo-element would be that it automatically enables the use of any existing 'state' CSS selector (:nth-child, :has, etc) instead of having to spec and implement that for the pseudo-class?

For example, this should automatically work if ::top-layer would be a pseudo-element:

/* Style popovers if a dialog is also present */
::top-layer:has( dialog ) [popover] {
  ...
}

[bramus]

# Am I missing something that makes this not work?

The discussion in #7319 started with the suggestion to add :top-layer but eventually we moved away from that. This comment summarizes it nicely:

The TL/DR is that OpenUI roughly agreed with CSSWG that perhaps :top-layer isn't a good name. We discussed alternatives like :popup-open (specific to the Pop-up API), or just :open (which should apply to other cases like <summary>/<details>). We also discussed the ::top-layer pseudo element #7319 (comment), but found it too non-standard and confusing for developers.