Использование CSS-in-JS для стилизации пользовательских элементов

Использование CSS-in-JS для стилизации пользовательских элементов

От автора: сегодня рассмотрим, как делается стилизация CSS-in-JS по отношению к пользовательским элементам. Популярность CSS-in-JS в основном исходит от сообщества React, и действительно многие библиотеки CSS-in-JS специфичны для React. Тем не менее, Emotion, самая популярная библиотека с точки зрения количества загрузок через npm, не зависит от фреймворка.

При создании пользовательских элементов распространено использование shadow DOM, но это не обязательно. Не во всех случаях требуется такой уровень инкапсуляции. Хотя также возможно стилизовать пользовательские элементы с помощью CSS в обычной таблице стилей, мы рассмотрим использование Emotion. Начнем с установки:

Emotion предлагает функцию css:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

css помечен как литерал шаблона. Он принимает стандартный синтаксис CSS, но добавляет поддержку вложенности в стиле Sass.

После определения некоторых стилей, они должны быть применены. Работа с пользовательскими элементами может быть несколько громоздкой. Такие библиотеки, как Stencil и LitElement — компилируются в веб-компоненты, но предлагают более дружественный API, чем тот, который мы получили бы прямо из коробки.

Итак, мы собираемся определить стили с помощью Emotion и использовать преимущества как Stencil, так и LitElement, чтобы немного упростить работу с веб-компонентами.

Применение стилей для Stencil

Stencil использует новейшую функцию декораторов JavaScript. Декоратор @Component используется для предоставления метаданных о компоненте. По умолчанию Stencil не использует shadow DOM, но я хотел бы явно установить shadow: false внутри декоратора @Component:

Stencil использует JSX, поэтому стили применяются с помощью синтаксиса фигурных скобок ({}):

Вот как пример простого компонента будет выглядеть в Stencil:

Применение стилей для LitElement

С другой стороны LitElement использует теневой DOM по умолчанию. При создании пользовательского элемента с помощью LitElement расширяется класс LitElement. LitElement содержит метод createRenderRoot(), который создает и открывает shadow DOM:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Не хотите использовать shadow DOM? Для этого нужна повторная реализация данного метода внутри класса компонента:

Внутри функции render мы можем ссылаться на стили, которые определили, используя литерал шаблона:

Стоит отметить, что при использовании LitElement мы можем использовать элемент slot только с shadow DOM (у Stencil такой проблемы нет). Таким образом, мы получаем:

Подробнее об Emotion

Нам не нужно беспокоиться об именовании кнопки — Emotion сгенерирует случайное имя класса. Мы могли бы использовать вложенность CSS и прикрепить класс только к родительскому элементу. В качестве альтернативы мы можем определить стили как отдельные тегированные литералы шаблона:

А затем применить их отдельно к различным элементам HTML (в этом примере используется JSX):

Стилизация контейнера

Пока что мы стилизовали внутреннее содержимое пользовательского элемента. Для стилизации самого контейнера нам понадобится еще один импорт из Emotion.

injectGlobal включает стили в «глобальную область» (например, пишет обычный CSS в традиционной таблице стилей, а не генерирует случайное имя класса). Пользовательские элементы имеют по умолчанию display: inline (несколько странное решение от авторов спецификации). Почти во всех случаях я изменяю это значение по умолчанию, применяя стиль ко всем экземплярам компонента. Ниже приведен buttonStyles, который демонстрирует, как мы можем это изменить, используя injectGlobal:

Почему бы просто не использовать shadow DOM?

Если компонент может оказаться в любой базе кода, то shadow DOM вполне может быть хорошим вариантом. Он идеально подходит для сторонних виджетов — любой CSS, примененный к странице, просто не сломает компонент благодаря изолированной природе shadow DOM. Вот почему он используется встраиваемыми элементами Twitter. Тем не менее, подавляющее большинство из нас создают компоненты для определенного сайта или приложения и ни для чего больше. В этой ситуации, shadow DOM может увеличить сложность, а предполагаемые преимущества будут ограничены.

Автор: Ollie Williams

Источник: https://css-tricks.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree