0

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; }

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
user8195088
  • 1
  • 2

2 Answers2

0

Slotted content is not moved to shadowDOM, therefor you can not style it from shadowDOM

Slotted content is reflected to shadowDOM

Slotted (lightDOM) content is styled by the container/level the lightDOM is in, in this case global CSS (see H1 and span styling)

::slotted(span) can only style the skin of lightDOM content, not DOM levels deeper (only span2 is styled)

Style slotted text with an [attribute] on the host element (see launched)

customElements.define("component-with-slot",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"}).innerHTML = 
     `<style>
        *::slotted(span) { padding:2em } 
        :host([launched])  { color:red; font-weight:bold }
      </style>` +
     `<slot></slot>`;
  }
});
/* global CSS */
h1 {
  border:5px solid blue
}
span {
  border:4px dashed red;
}
<component-with-slot>
  <h1>I am slotted <span>span1</span></h1>
  <span>span2</span>
</component-with-slot>

<component-with-slot launched>
  Launch happened
</component-with-slot>

For very detailed info see: ::slotted CSS selector for nested children in shadowDOM slot

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
0

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

sl-tab[active]::part(base) {
  color: red;
}
Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
user8195088
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 31 '23 at 01:37