Styling `::slotted()` elements from the static styles property

Question

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.

Answer 1

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 */
        }
      `
      ];
  }