Templates

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

Import

import { html } from 'lit-html';

Signature

html(strings, values): TemplateResult

Parameters

strings

TemplateStringsArray

values

Array<unknown>

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

Import

import { nothing } from 'lit-html';

Type

Renders a template result or other value to a container.

Import

import { render } from 'lit-html';

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

Element | 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

import { svg } from 'lit-html';

Signature

svg(strings, values): SVGTemplateResult

Parameters

strings

TemplateStringsArray

values

Array<unknown>

A TemplateResult for SVG fragments.

Import

import { SVGTemplateResult } from 'lit-html';

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.

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

Import

import { TemplateResult } from 'lit-html';

Import

import { RenderOptions } from 'lit-html';