Шаг 5: стиль элемента с пользовательскими свойствами CSS

Создавайте стили, используя значения пользовательских свойств CSS
Установите значения для пользовательских свойств
Следующие шаги

Shadow DOM помогает предотвратить случайную стилизацию внутренних элементов вашего элемента. Чтобы позволить пользователям стилизовать ваш компонент, вы можете использовать пользовательские свойства CSS .

Внутри вашего элемента вы создаете стили, используя значения пользовательских свойств CSS.
За пределами вашего элемента пользователи элемента присваивают значения пользовательским свойствам CSS, которые используются вашими стилями.

На этом этапе вы будете:

Если вы хотите узнать, как можно использовать пользовательские свойства для создания темы уровня документа, вы также можете:

Создавайте стили, используя значения пользовательских свойств CSS

В icon-toggle.js, внутри функции шаблона, отредактируйте блок <style>. Замените значения, назначенные заливке и обводке, пользовательскими свойствами.

До

После

Ключевая информация:

Имя пользовательского свойства всегда должно начинаться с двух тире (-).
Получите доступ к значению пользовательского свойства с помощью функции var, например:
iron-icon {fill: var (--icon-toggle-color); }
Вы можете добавить значение по умолчанию, которое будет использоваться, если пользовательское свойство не определено:
iron-icon {fill: var (--icon-toggle-color, rgba (0,0,0,0)); }

Установите значения для пользовательских свойств

В демо-папке откройте demo-element.js и установите значения для новых свойств.

demo / demo-element.js: раньше

demo / demo-element.js: после

Ключевая информация:

Запустите демо снова, чтобы получить красочный!

Запустите демо снова, чтобы получить красочный

Вот и все - ваш элемент закончен. Вы создали элемент, который имеет базовый интерфейс, API и свойства пользовательского стиля.

Если у вас возникли проблемы с работой элемента, папка icon-toggle-finish содержит окончательный код.

Если вы хотите узнать немного больше о пользовательских свойствах, читайте дальше.

Возможно, вы захотите создать тему для всего приложения. Один из способов сделать это - определить пользовательские свойства на уровне документа вне ваших элементов Polymer.

Поскольку пользовательские свойства еще не встроены в большинство браузеров, если вы используете их вне элемента Polymer, вам необходимо использовать специальный тег пользовательского стиля.

Добавьте следующий код в тег <head> файла demo / index.html:

демо / index.html

<custom-style> <style> html {--icon-toggle-outline-color: red; } demo-element {--icon-toggle-press-color: blue; } body {--icon-toggle-color: purple; } </ style> </ custom-style>

Ключевая информация:

Селектор html соответствует корневому элементу документа HTML в файле demo / index.html. Значение пользовательского свойства, определенное в правиле html {...} в demo / index.html, действует по умолчанию и будет наследоваться любыми элементами в его области видимости.
Селектор demo-element соответствует элементу <demo-element> и имеет более высокую специфичность, чем селектор: host внутри demo-element. Вы можете использовать этот факт, чтобы указать свои собственные значения для пользовательских свойств, которые автор пользовательского элемента определил внутри этого пользовательского элемента, без изменения кода элемента.
Пользовательские свойства могут быть определены только в наборах правил, которые соответствуют селектору html или пользовательскому элементу Polymer. Это ограничение реализации пользовательских свойств Polymer.
Элементы должны находиться в той же области документа, что и <custom-style>, чтобы селекторы, определенные в <custom-style>, соответствовали им. Элементы внутри теневого DOM другого элемента не входят в область видимости основного документа.
Например, на приведенной ниже диаграмме <demo-element> находится в той же области, что и <custom-style> в demo / index.html, а <iron-icon> и <icon-toggle> - нет.
demo / index.html DOM-дерево
<html> <demo-element> <icon-toggle> <iron-icon>
Используя дерево DOM выше, селекторы в следующем примере кода найдут совпадение:
демо / index.html
<custom-style> <style> html {...} demo-element {...} </ style> </ custom-style> <demo-element> </ demo-element>
Однако селекторы в следующем примере кода не найдут соответствия:
демо / index.html
<custom-style> <style> iron-icon {...} icon-toggle {...} </ style> </ custom-style> <demo-element> </ demo-element>

Для получения дополнительной информации см. Документацию по пользовательские свойства CSS ,

Следующие шаги

Или просмотрите предыдущий раздел:

Предыдущий шаг: реагировать на ввод