0

I have a style that's defined out of my reach, with an ampersand

.my-button {
    ...
    &:last-child {
        ...
    }
}

I want to extend this from a selector with a slotted pseudo selector

.extended-button ::slotted(*) {
    @extend .my-button;
}

This results in css

.my-button:last-child,
.extended-button :last-child::slotted(*) {
    ...
}

But I want 

.my-button:last-child,
.extended-button ::slotted(*:last-child) {
    ...
}

I searched for it, and found on the github of sass, that they support slotted elements. What exactly does that mean?

Anyone an idea what is happening here? How can I get the ampersand into the slotted pseudo selector?

Thank you!

SBylemans
  • 1,764
  • 13
  • 28
  • Are you trying to style a web component, otherwise `::slotted` or `::content` won't work. https://stackoverflow.com/questions/27622605/what-is-the-content-slotted-pseudo-element-and-how-does-it-work#27629265 – anderssonola Jul 06 '19 at 20:35
  • @anderssonola That's exactly what I'm trying to do – SBylemans Jul 08 '19 at 07:35

0 Answers0