Skip to main content

Templates

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

Import

Signature

html(strings, values): TemplateResult<1>

Parameters

strings
TemplateStringsArray
values
Array<unknown>

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

Import

Type

symbol

Renders a value, usually a lit-html TemplateResult, to the container.

Import

Signature

render(value, container, options?): Interface<ChildPartImpl>

Parameters

value
unknown
container
MDN HTMLElement | MDN DocumentFragment
options?
RenderOptions

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

Import

Signature

svg(strings, values): TemplateResult<2>

Parameters

strings
TemplateStringsArray
values
Array<unknown>

Import

Methods and properties

new Template(__namedParameters, options?): Template

Permalink to constructor
Parameters
__namedParameters
TemplateResult<ResultType>
options?
RenderOptions

parts: Array<TemplatePart>

Permalink to parts View source
Parameters
html
string
_options?
RenderOptions

Used to sanitize any value before it is written into the DOM. This can be used to implement a security policy of allowed and disallowed values in order to prevent XSS attacks.

Import

Type

(node: Node, name: string, type: "property" | "attribute") => ValueSanitizer

Details

One way of using this callback would be to check attributes and properties against a list of high risk fields, and require that values written to such fields be instances of a class which is safe by construction. Closure's Safe HTML Types is one implementation of this technique ( https://github.com/google/safe-html-types/blob/master/doc/safehtml-types.md). The TrustedTypes polyfill in API-only mode could also be used as a basis for this technique (https://github.com/WICG/trusted-types).

Import

Type

TemplateResult<SVG_RESULT>

The return type of the template tag functions.

Import

Type

{_$litType$: T, strings: TemplateStringsArray, values: Array<unknown>}