Стили

Применяет заданные стили к shadowRoot. Если Shadow DOM доступен, но adoptedStyleSheets недоступен, стили добавляются в shadowRoot, чтобы имитировать поведение, предусмотренное спецификацией. Обратите внимание: при использовании полифила любые стили, которые впоследствии добавляются в shadowRoot, следует размещать перед любыми подключёнными стилями, добавленными полифилом. Это соответствует поведению спецификации, согласно которому подключённые таблицы стилей имеют приоритет над стилями в shadowRoot.

Импорт

import { adoptStyles } from 'lit';

Сигнатура

adoptStyles(renderRoot, styles): void

Параметры

renderRoot

ShadowRoot

styles

Array<CSSResultOrNative>

Тег шаблонной строки, который можно использовать со свойством styles LitElement для задания стилей элемента.

Импорт

import { css } from 'lit';

Сигнатура

css(strings, values): CSSResult

Параметры

strings

TemplateStringsArray

values

Array<number | CSSResultGroup>

Подробнее

Из соображений безопасности во встроенных выражениях можно использовать только строковые литералы и числа. Для включения нелитеральных значений внутри выражения можно использовать unsafeCSS.

Контейнер для строки CSS-текста, который можно использовать для создания CSSStyleSheet.

Импорт

import { CSSResult } from 'lit';

Подробнее

CSSResult — это возвращаемое значение шаблонных строк с тегом css и unsafeCSS(). Чтобы гарантировать, что CSSResult создаются только с помощью тега css и unsafeCSS(), создать экземпляр CSSResult напрямую нельзя.

Импорт

import { getCompatibleStyle } from 'lit';

Сигнатура

getCompatibleStyle(s): CSSResultOrNative

Параметры

s

CSSResultOrNative

Поддерживает ли текущий браузер adoptedStyleSheets.

Импорт

import { supportsAdoptingStyleSheets } from 'lit';

Тип

Оборачивает значение для интерполяции в шаблонную строку с тегом css.

Импорт

import { unsafeCSS } from 'lit';

Сигнатура

unsafeCSS(value): CSSResult

Параметры

value

unknown

Подробнее

Это небезопасно, поскольку недоверенный CSS-текст может использоваться для отправки запросов на внешний сервер или передачи данных на контролируемый злоумышленником сайт. Используйте это только с доверенными данными.

Импорт

import { CSSResultArray } from 'lit';

Тип

Один объект CSSResult, CSSStyleSheet или массив либо вложенные массивы таких объектов.

Импорт

import { CSSResultGroup } from 'lit';

Тип

Объект CSSResult или нативный CSSStyleSheet.

Импорт

import { CSSResultOrNative } from 'lit';

Тип

Подробнее

В браузерах с поддержкой создаваемых таблиц стилей CSS объект CSSStyleSheet можно использовать для стилизации наряду с CSSResult, полученным с помощью шаблонного тега css.