[css-scoping] Add abilty to select slot fallback content

[sorvell]

Background

It is often useful to select and style slot fallback content. When this content is in the same scope as the slot for which it is fallback, this is easily done; however, when the fallback content is rendered as a result of flattening, it is not currently possible.

For example, if "all content shown in slots should have an outline when hovered," a user can do the following, but this misses selecting any flattened fallback content.

::slotted(:hover), slot > :hover {  
    outline: 2px solid;
}

Flattened assigned nodes are selectable via ::slotted(...), but this selector cannot select fallback content.

The ability to select fallback content will also be useful for the ::has-slotted(...) selector.

For example, if "leading padding should account for the presence of a slotted icon," a user can do the following, but again this misses selecting any flattened fallback content.

.container:has(:has-slotted(*), slot > *)) {
  padding: 0.25rem;
}

Proposal

Add complementary versions of ::slotted and :has-slotted that function similarly but also include fallback content. Naming these is challenging of course. Let's start with:

• ::flat-slotted(...): the same as ::slotted(...) but includes all fallback content, flattened or not.
• :has-flat-slotted(...): the same as :has-slotted(...) but includes all fallback content, flattened or not.

Alternatives Considered

Another possibility would be to have selectors that exclusively select fallback content. This is strictly more powerful since fallbacks are currently not specifically selectable. However, use cases for this are not currently clear so it seems unnecessary.