Static HTML

Interprets a template literal as an HTML template that can efficiently render to and update a container.

Import

import { html } from 'lit/static-html.js';

Signature

html(strings, values): TemplateResult<ResultType>

Parameters

strings

TemplateStringsArray

values

Array<unknown>

Details

Includes static value support from lit-html/static.js.

Tags a string literal so that it behaves like part of the static template strings instead of a dynamic value.

Import

import { literal } from 'lit/static-html.js';

Signature

literal(strings, values): StaticValue

Parameters

strings

TemplateStringsArray

values

Array<unknown>

Details

The only values that may be used in template expressions are other tagged literal results or unsafeStatic values (note that untrusted content should never be passed to unsafeStatic). Users must take care to ensure that adding the static string to the template results in well-formed HTML, or else templates may break unexpectedly. Static values can be changed, but they will cause a complete re-render since they effectively create a new template.

Interprets a template literal as an SVG template that can efficiently render to and update a container.

Import

import { svg } from 'lit/static-html.js';

Signature

svg(strings, values): TemplateResult<ResultType>

Parameters

strings

TemplateStringsArray

values

Array<unknown>

Details

Includes static value support from lit-html/static.js.

Wraps a string so that it behaves like part of the static template strings instead of a dynamic value.

Import

import { unsafeStatic } from 'lit/static-html.js';

Signature

unsafeStatic(value): StaticValue

Parameters

value

string

Details

Users must take care to ensure that adding the static string to the template results in well-formed HTML, or else templates may break unexpectedly. Note that this function is unsafe to use on untrusted content, as it will be directly parsed into HTML. Do not pass user input to this function without sanitizing it. Static values can be changed, but they will cause a complete re-render since they effectively create a new template.

Wraps a lit-html template tag (html or svg) to add static value support.

Import

import { withStatic } from 'lit/static-html.js';

Signature

withStatic(coreTag): (strings: TemplateStringsArray, values: Array<unknown>) => TemplateResult<ResultType>

Parameters

coreTag

(strings: TemplateStringsArray, values: Array<unknown>) => TemplateResult<1> | (strings: TemplateStringsArray, values: Array<unknown>) => TemplateResult<2>

Import

import { StaticValue } from 'lit/static-html.js';