chrome-devtools-frontend
Version:
Chrome DevTools UI
59 lines (36 loc) • 2.74 kB
Markdown
# lit-html 2.0
Efficient, Expressive, Extensible HTML templates in JavaScript
[](https://github.com/lit/lit/actions?query=workflow%3ATests)
[](https://www.npmjs.com/package/lit-html)
[](https://www.polymer-project.org/slack-invite)
[](https://github.com/web-padawan/awesome-lit)
lit-html is the template system that powers the [Lit](https://lit.dev) library for building fast web components. When using `lit-html` to develop web components, most users should import lit-html via the [`lit`](https://www.npmjs.com/package/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](https://lit.dev/docs/releases/upgrade/).
## Documentation
Full documentation is available at [lit.dev](https://lit.dev).
## Overview
`lit-html` lets you write [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) in JavaScript with [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/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.
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) 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
```bash
$ npm install lit-html
```
Or use from `lit`:
```bash
$ npm install lit
```
## Contributing
Please see [CONTRIBUTING.md](../../CONTRIBUTING.md).