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

Я пытаюсь стилизовать элементы :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>

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


person Xaviju    schedule 25.06.2019    source источник
comment
stackoverflow.com/questions/27622605/   -  person Paulie_D    schedule 25.06.2019
comment
Я знаю, как работает ::slotted, мне просто нужно знать, почему он работает только в litElement, если я использую его между тегами стилей, а не в свойстве стилей. Извините, я что-то упустил в вашем ответе?   -  person Xaviju    schedule 25.06.2019
comment
Это странно, ваш пример должен работать. Какой браузер?   -  person Justin Fagnani    schedule 24.07.2019


Ответы (1)


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

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

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

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

person Xaviju    schedule 25.06.2019
comment
кстати, вам не нужно использовать несколько css выражений в массиве, их можно комбинировать. Поддержка массивов в основном предназначена для обмена стилями между модулями. Вы также можете просто вернуть одно выражение css вместо массива. - person Justin Fagnani; 24.07.2019
comment
Вы правы, я использовал массив, чтобы лучше разделить выражения по их ответственности. Не обязательно, но читать легче. - person Xaviju; 25.07.2019