[css-shadow-parts] Specifying named slot in styling its 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?)

[LeaVerou]

A comparison with #7922 would be useful. With the combinator syntax, the examples in the OP could be written as:

slot {
  /slotted/ p:first-child { ... }
  /slotted/ div + div { ... }
}

with a named slot:

slot[name="one"]{
  /slotted/ p:first-child { ... }
  /slotted/ div + div { ... }
}

So far the opposition to #7922 has been around implementation difficulty, so it would be useful to hear from implementors about whether something like this can be implemented more easily.

Another related proposal is #10941 which more broadly allows escaping the shadow DOM (akin to :global() in some JS frameworks). Though to use it for the use cases here would require some way to target the host from the outside (either a fixed tag name or a :state()), which is not as elegant.