Styles

adoptStyles

function Permalink to adoptStyles View source

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
MDN ShadowRoot
styles
Array<CSSResultOrNative>

css

function Permalink to css View source

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.

CSSResult

class Permalink to CSSResult View source

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: string

Permalink to cssText View source

styleSheet: undefined | MDN CSSStyleSheet

Permalink to styleSheet View source

toString(): string

Permalink to toString View source

getCompatibleStyle

function Permalink to getCompatibleStyle View source

Import

import { getCompatibleStyle } from 'lit';

Signature

getCompatibleStyle(s): CSSResultOrNative

Parameters

s
CSSResultOrNative

supportsAdoptingStyleSheets

value Permalink to supportsAdoptingStyleSheets View source

Whether the current browser supports adoptedStyleSheets.

Import

import { supportsAdoptingStyleSheets } from 'lit';

Type

boolean

unsafeCSS

function Permalink to unsafeCSS View source

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.

CSSResultArray

type Permalink to CSSResultArray View source

Import

import { CSSResultArray } from 'lit';

Type

Array<CSSResultOrNative | CSSResultArray>

CSSResultGroup

type Permalink to CSSResultGroup View source

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

Import

import { CSSResultGroup } from 'lit';

Type

CSSResultOrNative | CSSResultArray

CSSResultOrNative

type Permalink to CSSResultOrNative View source

A CSSResult or native CSSStyleSheet.

Import

import { CSSResultOrNative } from 'lit';

Type

CSSResult | MDN 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.