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
Efficient, Expressive, Extensible HTML templates in JavaScript
![Mentioned in Awesome lit-html](https://awesome.re/mentioned-badge.svg)
Documentation
Full documentation is available at lit-html.polymer-project.org.
Docs source is in the docs
folder. To build the site youself, see the instructions in docs/README.md.
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
Contributing
Please see CONTRIBUTING.md.