| layout |
|---|
default |
lit-html lets you write HTML templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM:
import {html, render} from 'lit-html';
// A lit-html template uses the `html` template tag:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;
// It's rendered with the `render()` function:
render(sayHello('World'), document.body);
// And re-renders only update the data that changed, without
// VDOM diffing!
render(sayHello('Everyone'), document.body);lit-html is extremely fast. It uses fast platform features like HTML <template> elements with native cloning.
Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn't re-render the entire view.
lit-html gives you the full power of JavaScript and functional programming patterns.
Templates are values that can be computed, passed to and from functions and nested. Expressions are real JavaScript and can include anything you need.
lit-html support many kind of values natively: strings, DOM nodes, heterogeneous lists, nested templates and more.
lit-html is not a framework, nor does it include a component model. It focuses on one thing and one thing only: efficiently creating and updating DOM. It can be used standalone for simple tasks, or combined with a framework or component model, like Web Components, for a full-featured UI development platform.
