[css-shadow-parts] Specifying named slot in styling its slotted content

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 { ... }
}

Start with issue #7922 and the linked CodePen demonstration to understand the mismatch between light-DOM relationships and named-slot assignments. Compare the proposed ::resolved-slot() and @slotted syntaxes, then review the CSS Shadow Parts context. Done requires agreement on a syntax and its selector behavior before implementation can be scoped.