sasscss-selectorsweb-componentnative-web-componentshoelace

Unable to select <slot> using CSS Selector, how to style it to make "Launch" text color red?


As per above screenshot, I am trying to style web component , and content inside slot reveal/pointing to "Launch" when clicked. How can I style slot to apply text colour to "Launch". I am struggling to select slot using css selector. Any help/suggestions would be helpful.

I already tried to apply style using below selector but did not work for me.

sl-tab::part(base)::slotted(*) { color: red; }


Solution

  • I figured out how to style Launch with another way using:

    sl-tab[active]::part(base) {
      color: red;
    }