.. | ||
development | ||
directives | ||
node | ||
async-directive.d.ts | ||
async-directive.d.ts.map | ||
async-directive.js | ||
async-directive.js.map | ||
directive-helpers.d.ts | ||
directive-helpers.d.ts.map | ||
directive-helpers.js | ||
directive-helpers.js.map | ||
directive.d.ts | ||
directive.d.ts.map | ||
directive.js | ||
directive.js.map | ||
experimental-hydrate.d.ts | ||
experimental-hydrate.d.ts.map | ||
experimental-hydrate.js | ||
experimental-hydrate.js.map | ||
is-server.d.ts | ||
is-server.d.ts.map | ||
is-server.js | ||
is-server.js.map | ||
LICENSE | ||
lit-html.d.ts | ||
lit-html.d.ts.map | ||
lit-html.js | ||
lit-html.js.map | ||
package.json | ||
polyfill-support.d.ts | ||
polyfill-support.d.ts.map | ||
polyfill-support.js | ||
polyfill-support.js.map | ||
private-ssr-support.d.ts | ||
private-ssr-support.d.ts.map | ||
private-ssr-support.js | ||
private-ssr-support.js.map | ||
README.md | ||
static.d.ts | ||
static.d.ts.map | ||
static.js | ||
static.js.map |
lit-html 2.0
Efficient, Expressive, Extensible HTML templates in JavaScript
lit-html is the template system that powers the Lit library for building fast web components. When using lit-html
to develop web components, most users should import lit-html via the lit
package rather than installing and importing from lit-html
directly.
About this release
This is a stable release of lit-html
2.0 (part of the Lit 2.0 release). If upgrading from previous versions of lit-html
, please note the minor breaking changes from lit-html 1.0 in the Upgrade Guide.
Documentation
Full documentation is available at lit.dev.
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';
// 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 aTemplateResult
, which is a container for a template, and the values that should populate the template.render()
: A function that renders aTemplateResult
to a DOM container, such as an element or shadow root.
Installation
$ npm install lit-html
Or use from lit
:
$ npm install lit
Contributing
Please see CONTRIBUTING.md.