[csswg-drafts] [css-shadow-parts] Specifying named slot in styling it's slotted content (#8577)

castastrophe has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shadow-parts] Specifying named slot in styling it's 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](https://codepen.io/castastrophe/pen/yLXpagw) 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 { ... }
}
```



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8577 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 13 March 2023 16:12:48 UTC