[csswg-drafts] [css-selectors] :first-assigned / :last-assigned / :nth-assigned (#6620)

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

== [css-selectors] :first-assigned / :last-assigned / :nth-assigned ==
When styling web components with multiple named slots, the `:first-child` / `:last-child` / `:nth-child` pseudo-classes, when used inside the `:slotted()` pseudo-element, represent an element's relationship to it's light DOM siblings.

CodePen: https://codepen.io/castastrophe/pen/yLXpagw

![image](https://user-images.githubusercontent.com/1840295/133660564-fee2a11c-3d40-4f71-a8a8-1da36dc537fa.png)

Given the following markup:
```html
    <x-component>
        <span slot="one" id="first">Light DOM: span 1</span>
        <span slot="two" id="nth-2">Light DOM: span 2</span>
        <span slot="one" id="nth-3">Light DOM: span 3</span>
        <span slot="two" id="nth-4">Light DOM: span 4</span>
        <span id="last">Light DOM: span 5</span>
    </x-component>
```

- We expect `:slotted(*:first-child)` to apply only to `#first`.
- We expect `:slotted(*:last-child)` to apply only to `#last`.
- We expect `:slotted(*:nth-child(2))` to apply only to `#nth-2`.

Given named slots, many authors expect these pseudo-classes to represent the element's relationship to it's fellow slotted siblings as such:
- `:slotted(*:first-child)` expected to apply to `#first`, `#nth-2`, and `#last`.
- `:slotted(*:last-child)` expected to apply to `#nth-3`, `#nth-4`, `#last`.
- `:slotted(*:nth-child(2))` expected to apply to `#nth-3`, `#nth-4`, `#last`.
- `[name="two"]:slotted(*:first-child)` expected to apply only to `#nth-2`.
- `[name="one"]:slotted(*:last-child)` expected to apply only to `#nth-3`.

Rather than muddy the existing behavior of `:first-child` etc., I propose we add `:first-assigned` / `:last-assigned` / `:nth-assigned()` which will represent a slotted element's relationship to it's sibling assigned nodes. ++ @Westbrook for the naming proposal!

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


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

Received on Thursday, 16 September 2021 18:01:09 UTC