lit-html
Efficient, Expressive, Extensible HTML templates in JavaScript
Documentation
Full documentation is available at lit-html.polymer-project.org.
Docs source is in the docs
folder. To build the site yourself, see the instructions in docs/README.md.
Overview
lit-html
lets you write HTML templates in JavaScript with template literals.
lit-html templates are plain JavaScript and combine the familiarity of writing HTML with the power of JavaScript. lit-html takes care of efficiently rendering templates to DOM, including efficiently updating the DOM with new values.
import {html, render} from 'lit-html';
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;
render(helloTemplate('Steve'), document.body);
render(helloTemplate('Kevin'), document.body);
lit-html
provides two main exports:
html
: A JavaScript template tag used to produce a TemplateResult
, which is a container for a template, and the values that should populate the template.render()
: A function that renders a TemplateResult
to a DOM container, such as an element or shadow root.
Installation
$ npm install lit-html
Forward compatibility with lit-html 2.0
lit-html 2.0 has a new directive authoring API that has been back-ported to lit-html 1.4 in order to ease upgrading.
The lit-html 2.0 directive API is available in new modules whose paths are the same in lit-html 1.4 and 2.0, allowing code to import and use the APIs against either version.
You can import the new APIs like so:
import {html} from 'lit-html';
import {directive, Directive, Part, PartInfo, PartType} from 'lit-html/directive.js';
Then implement a directive class and convert it to a directive function:
class MyDirective extends Directive {
}
export const myDirective = directive(MyDirective);
Important note: The AsyncDirective
base class is available, but lit-html 1.4 does not implement the disconnected
and reconnected
callbacks.
For more details on upgrading see the Update custom directive implementations guide.
Contributing
Please see CONTRIBUTING.md.