[css-shadow-parts] Specifying named slot in styling it's slotted content

[castastrophe]

When discussing #7922, I raised a concern that the current implementation of ::slotted (which matches selectors based on their light DOM relationships, regardless of slot assignments) could be compounded by adding combinator support inside that pseudo.

This codepen demonstrates the confusion of styling :first-child/:last-child when using named slots b/c the selector is evaluated based on the :first-child in the light DOM but not the :first-child as assigned to a named slot.

I propose we create a new approach to styling slotted content that allows authors to identify 'default' or named slot. i.e.,

::resolved-slot('one', *:first-child) {

^ Not in love with that naming but we can bikeshed later.

Alternatively, @LeaVerou mentioned a possible alternative syntax entirely to indicate a shift from the web component's Shadow DOM to the light DOM. Perhaps:

@slotted {
  p:first-child { ... }
  div + div { ... }
}

with a named slot:

@slotted (name="one"){
  p:first-child { ... }
  div + div { ... }
}

[castastrophe]

I'll add, I rather like the ergonomics of making slotted an at-rule because it functions in many ways like container queries in the sense it creates a scope for the content inside it. It also makes me wonder if there additional conditions that might be able to be included.

@slotted one { ... }
@slotted two not (width: 400px) { ... }

[jaredcwhite]

I also really like the @slotted syntax for addressing this. I sort of wonder though if it should always be just be a single named or default slot, and not apply to all slots? Because the selectors are more specific and also related to their slotted-specific positioning, I don't know that it makes sense to write rules which simply "apply to all the slots". (Maybe…you could still opt-in using * or something?)