Styles

function adoptStylesSource

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>

function cssSource

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.

class CSSResultSource

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.

Methods and properties

readonly cssText: stringSource

styleSheet: undefined | CSSStyleSheetSource

toString(): stringSource

function getCompatibleStyleSource

Import

import { getCompatibleStyle } from 'lit';

Signature

getCompatibleStyle(s): CSSResultOrNative

Parameters

s: CSSResultOrNative

value supportsAdoptingStyleSheetsSource

Whether the current browser supports adoptedStyleSheets.

Import

import { supportsAdoptingStyleSheets } from 'lit';

Type

boolean

function unsafeCSSSource

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.

type CSSResultArraySource

Import

import { CSSResultArray } from 'lit';

Type

Array<CSSResultOrNative | CSSResultArray>

type CSSResultGroupSource

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

Import

import { CSSResultGroup } from 'lit';

Type

CSSResultOrNative | CSSResultArray

type CSSResultOrNativeSource

A CSSResult or native CSSStyleSheet.

Import

import { CSSResultOrNative } from 'lit';

Type

CSSResult | CSSStyleSheet

Details

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