I am struggling to select the second slotted item in a specific slot using
slot[name=foo]::slotted(:nth-child(2)){Within my web component, I have a default slot and named slots for both foo and bar. My goal is to style the second slotted foo element.
Unfortunately, none of these CSS selectors within the template are yielding the desired results:
slot[name=foo]::slotted(:nth-child(2)){
outline: 2px solid green;
}
::slotted(slot[name=foo]:nth-child(2)){
outline: 2px solid green;
}
::slotted(slot[name="foo"]:nth-child(2)){
outline: 2px solid green;
}
For reference, here is my jsfiddle link: https://jsfiddle.net/donohueseth/msxojtac/14
Is there a way to properly target the nth-child() of a slotted element when a web component has multiple different named slots?