You're viewing docs for an older version of Lit. Click here for the latest version.

Templates

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

Import

Signature

html(strings, values): TemplateResult

Parameters

strings
TemplateStringsArray
values
Array<unknown>

A sentinel value that signals a NodePart to fully clear its content.

Import

Type

symbol

Renders a template result or other value to a container.

Import

Signature

render(result, container, options?): void

Parameters

result
unknown

Any value renderable by NodePart - typically a TemplateResult created by evaluating a template tag like html or svg.

container
MDN Element | MDN DocumentFragment

A DOM parent to render to. The entire contents are either replaced, or efficiently updated if the same result type was previous rendered there.

options?
Partial<RenderOptions>

RenderOptions for the entire render tree rendered to this container. Render options must not change between renders to the same container, as those changes will not effect previously rendered DOM.

Details

To update a container with new values, reevaluate the template literal and call render with the new result.

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

Import

Signature

svg(strings, values): SVGTemplateResult

Parameters

strings
TemplateStringsArray
values
Array<unknown>

A TemplateResult for SVG fragments.

Import

Details

This class wraps HTML in an <svg> tag in order to parse its contents in the SVG namespace, then modifies the template to remove the <svg> tag so that clones only container the original fragment.

Methods and properties

new SVGTemplateResult(strings, values, type, processor): SVGTemplateResult

Permalink to constructor
Parameters
strings
TemplateStringsArray
values
ReadonlyArray<unknown>
type
string
processor
TemplateProcessor

readonly strings: TemplateStringsArray

Permalink to strings View source

readonly type: string

Permalink to type View source

readonly values: ReadonlyArray<unknown>

Permalink to values View source

Returns a string of HTML used to create a <template> element.

The return type of html, which holds a Template and the values from interpolated expressions.

Import

Methods and properties

new TemplateResult(strings, values, type, processor): TemplateResult

Permalink to constructor View source
Parameters
strings
TemplateStringsArray
values
ReadonlyArray<unknown>
type
string
processor
TemplateProcessor

readonly strings: TemplateStringsArray

Permalink to strings View source

readonly type: string

Permalink to type View source

readonly values: ReadonlyArray<unknown>

Permalink to values View source

Returns a string of HTML used to create a <template> element.

Import

Methods and properties

readonly eventContext?: EventTarget

Permalink to eventContext View source

readonly templateFactory: TemplateFactory

Permalink to templateFactory View source