Стилизация элементов `:: slotted ()` из свойства статических стилей

Question

Я пытаюсь стилизовать элементы :slotted в компоненте из свойства статических стилей, как рекомендовано в документации.

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

Но по какой-то причине не получает никакого эффекта.

Вместо этого, если определить тот же стиль в элементе стиля в функции render(), он работает как ожидалось

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

Я не уверен, ожидается ли это (и почему) или это ошибка.

Answer 1

Кажется, это проблема синтаксиса в моем примере.Я использовал массив стилей.

Это нормально работает

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

        ::slotted(span) {
          /* styles */
        }
      `,
      css`
        :host([data-type="primary"]) button {
          /* styles */
        }
      `
      ];
  }