Efficient, Expressive, Extensible HTML templates in JavaScript
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.
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';
// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;
// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);
// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
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.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 {
// ...
}
/** My directive docs **/
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.
Please see CONTRIBUTING.md.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4