[css-selectors] :first-assigned / :last-assigned / :nth-assigned

[castastrophe]

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

Given the following markup:

    <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!

[jpzwarte]

Just ran into this, but i figured out a workaround: ::slotted(:nth-child(1 of :not([slot]))). This only matches the first child in the default slot.