Как изменить стиль полимерного элемента

Question

Создан пользовательский полимерный элемент «autocomplete», который включает существующий полимерный элемент «paper-autocomplete». Класс «paper-autocomplete» имеет элемент «paper-input» с определенным стилем. Как изменить стиль элемента «paper-input» в классе элементов «autocomplete» (который вызывает «paper-autocomplete»)?

Answer 1

Элемент paper-input использует paper-input-container, поэтому вы можете определить набор CSS-переменных для его стилизации в соответствии с назначением / разрешением.

Если вы проверите источник для paper-input-container здесь и загляните в раздел "### Стиль", вы увидите все опции, которые вам нужны для стилизации элемента "извне".

Answer 2

В элемент paper-autocomplete добавьте следующее:

  paper-input {
    @apply --my-styles;
  }

В родительский элемент, в который вы добавляете автозаполнение, добавьте:

paper-autocomplete {
  --my-styles: {
    background-color: green;
    border-radius: 4px;
    border: 1px solid gray;
  };
}