Styles

Applies the given styles to a shadowRoot. When Shadow DOM is available but adoptedStyleSheets is not, styles are appended to the shadowRoot to mimic spec behavior. Note, when shimming is used, any styles that are subsequently placed into the shadowRoot should be placed before any shimmed adopted styles. This will match spec behavior that gives adopted sheets precedence over styles in shadowRoot.

Import

import { adoptStyles } from 'lit';

Signature

adoptStyles(renderRoot, styles): void

Parameters

renderRoot

ShadowRoot

styles

Array<CSSResultOrNative>

A template literal tag which can be used with LitElement's styles property to set element styles.

Import

import { css } from 'lit';

Signature

css(strings, values): CSSResult

Parameters

strings

TemplateStringsArray

values

Array<number | CSSResultGroup>

Details

For security reasons, only literal string values and number may be used in embedded expressions. To incorporate non-literal values unsafeCSS may be used inside an expression.

A container for a string of CSS text, that may be used to create a CSSStyleSheet.

Import

import { CSSResult } from 'lit';

Details

CSSResult is the return value of css-tagged template literals and unsafeCSS(). In order to ensure that CSSResults are only created via the css tag and unsafeCSS(), CSSResult cannot be constructed directly.

Import

import { getCompatibleStyle } from 'lit';

Signature

getCompatibleStyle(s): CSSResultOrNative

Parameters

s

CSSResultOrNative

Whether the current browser supports adoptedStyleSheets.

Import

import { supportsAdoptingStyleSheets } from 'lit';

Type

Wrap a value for interpolation in a css tagged template literal.

Import

import { unsafeCSS } from 'lit';

Signature

unsafeCSS(value): CSSResult

Parameters

value

unknown

Details

This is unsafe because untrusted CSS text can be used to phone home or exfiltrate data to an attacker controlled site. Take care to only use this with trusted input.

Import

import { CSSResultArray } from 'lit';

Type

A single CSSResult, CSSStyleSheet, or an array or nested arrays of those.

Import

import { CSSResultGroup } from 'lit';

Type

A CSSResult or native CSSStyleSheet.

Import

import { CSSResultOrNative } from 'lit';

Type

Details

In browsers that support constructible CSS style sheets, CSSStyleSheet object can be used for styling along side CSSResult from the css template tag.