What is lit-html?
The lit-html npm package is a simple, modern, and efficient library for creating and managing HTML templates with JavaScript. It uses JavaScript template literals with embedded HTML markup to render dynamic content in web applications. The library is designed to be lightweight and fast, with a focus on minimizing the amount of work needed to update the DOM when the application state changes.
What are lit-html's main functionalities?
Dynamic Template Binding
lit-html allows you to bind data dynamically to your HTML templates using JavaScript expressions within template literals. The example code shows how you can insert a variable 'name' into a paragraph element.
`<p>Hello, ${name}!</p>`
Conditional Rendering
You can use JavaScript ternary operators to conditionally render parts of your template. This example demonstrates rendering a different paragraph element based on the truthiness of a 'condition' variable.
`${condition ? html`<p>True</p>` : html`<p>False</p>`}`
Repeating Templates
lit-html provides a straightforward way to render lists or repeat templates by using standard JavaScript array methods like 'map'. In this code, 'items' is an array that is being mapped to a list of 'li' elements.
`${items.map(item => html`<li>${item}</li>`)}`
Event Handling
Event handling in lit-html is done by prefixing the event name with an '@' symbol and assigning a handler function. The example shows a button element that calls the 'handleClick' function when clicked.
`<button @click=${handleClick}>Click me</button>`
Composability
lit-html templates can be composed together to build complex UIs. This example demonstrates how you can combine different template parts, like 'headerTemplate' and 'footerTemplate', to create a complete layout.
`${headerTemplate} ${footerTemplate}`
Other packages similar to lit-html
react
React is a popular library for building user interfaces. It also uses a component-based model and JSX for templating, which is similar to lit-html's use of template literals. However, React has a larger ecosystem and provides more features out of the box, such as state management and lifecycle methods.
vue
Vue is another popular framework that offers a reactive and composable data model. It uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component state. Vue's approach is more similar to traditional HTML and less JavaScript-centric compared to lit-html.
svelte
Svelte is a compiler-based framework that shifts much of the work to compile time, resulting in smaller runtime size and potentially better performance. Like lit-html, Svelte uses a templating syntax that is close to standard HTML but with additional features for reactivity and state management.
lit-html 2.0
Efficient, Expressive, Extensible HTML templates in JavaScript
![Mentioned in Awesome Lit](https://awesome.re/mentioned-badge.svg)
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 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.
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';
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;
render(helloTemplate('Steve'), document.body);
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.
Installation
$ npm install lit-html
Or use from lit
:
$ npm install lit
Contributing
Please see CONTRIBUTING.md.