0

I'm trying to style the :slotted elements in a component from the static styles property as recommended in the docs. 

static get styles() {
    return [
      css `
        ::slotted(*) {
          color: var(--white, #fff);
          font-family: "Open Sans", sans-serif;
        }
      `,
      // more styles...
     ]
}

But for some reason, is getting no effect.

Instead if define the same style in a style element into the render() function it works as expected

    <style>
        ::slotted(*) {
          color: var(--white, #fff);
          font-family: "Open Sans", sans-serif;
        }
        // more styles...
    </style>

I'm not sure if this is expected (and why) or if this is a bug.

Xaviju
  • 250
  • 4
  • 12
  • 2
    https://stackoverflow.com/questions/27622605/what-is-the-content-slotted-pseudo-element-and-how-does-it-work – Paulie_D Jun 25 '19 at 12:28
  • I know how `::slotted` works, I just need to know why it only works in litElement if I use it between the style tags and not in the styles property. Sorry, am I missing something from your response? – Xaviju Jun 25 '19 at 13:20
  • This is odd, your example should work. What browser? – Justin Fagnani Jul 24 '19 at 02:50

1 Answers1

0

Seems to be a syntax problem in my example. I was using an style array.

This is working fine

static get styles(): CSSResultArray {
    return [ 
      css`
        :host {
          /* styles */
        }

        ::slotted(span) {
          /* styles */
        }
      `,
      css`
        :host([data-type="primary"]) button {
          /* styles */
        }
      `
      ];
  }
Xaviju
  • 250
  • 4
  • 12
  • fyi, you shouldn't need multiple `css` expressions in the array, they can be combined. Array support is mainly for sharing styles between modules. You can also just return a single `css` expression instead of an array. – Justin Fagnani Jul 24 '19 at 02:51
  • You are right, I used an array to better separate expressions by its responsibility. Not necessary but easier to read. – Xaviju Jul 25 '19 at 07:07