Стили

Применяет заданные стили к 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.