71 lines
3.1 KiB
Markdown
71 lines
3.1 KiB
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://lit.dev/discord/)
|
||
|
|
[](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 pre-release of Lit 3.0, the next major version of Lit.
|
||
|
|
|
||
|
|
Lit 3.0 has very few breaking changes from Lit 2.0:
|
||
|
|
|
||
|
|
- Drops support for IE11
|
||
|
|
- Published as ES2021
|
||
|
|
- Removes a couple of deprecated Lit 1.x APIs
|
||
|
|
|
||
|
|
Lit 3.0 should require no changes to upgrade from Lit 2.0 for the vast majority of users. Once the full release is published, most apps and libraries will be able to extend their npm version ranges to include both 2.x and 3.x, like `"^2.7.0 || ^3.0.0"`.
|
||
|
|
|
||
|
|
Lit 2.x and 3.0 are _interoperable_: templates, base classes, directives, decorators, etc., from one version of Lit will work with those from another.
|
||
|
|
|
||
|
|
Please file any issues you find on our [issue tracker](https://github.com/lit/lit/issues).
|
||
|
|
|
||
|
|
## 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).
|