lit-html

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.

README

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 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';

// 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 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.

Changelog

lit-element - 3.0.0

Major Changes

• Most users should no longer import directly from lit-element, and instead prefer importing LitElement from the lit packages. The default entry point for lit-element remains backward-compatible and includes all decorators. However, it's recommended to use import {LitElement} from 'lit'; and import decorators from lit/decorators as necessary. See the Upgrade Guide for more details.

• UpdatingElement has been moved from the lit-element package to the @lit/reactive-element package and renamed to ReactiveElement. See the ReactiveElement API documentation for more details. In addition, the source for css-tag, and all decorators have been moved to @lit/reactive-element. However, all symbols are re-exported from both lit and lit-element packages.

• The @internalProperty decorator has been renamed to @state.

• Errors that occur during the update cycle were previously squelched to allow subsequent updates to proceed normally. Now errors are re-fired asynchronously so they can be detected. Errors can be observed via an unhandledrejection event handler on window.

• The lib folder has been removed.

• Rendering of renderRoot/shadowRoot) via createRenderRoot and support for static styles has moved from LitElement to ReactiveElement.

• The createRenderRoot method is now called just before the first update rather than in the constructor. Element code can not assume the renderRoot exists before the element hasUpdated. This change was made for compatibility with SSR.

• ReactiveElement's initialize method has been removed. This work is now done in the element constructor.

• The static render has been removed.

• For consistency, renamed _getUpdateComplete to getUpdateComplete.

• When a property declaration is reflect: true and its toAttribute function returns undefined the attribute is now removed where previously it was left unchanged (#872).

• The dirty check in attributeChangedCallback has been removed. While technically breaking, in practice it should very rarely be (#699).

• LitElement's adoptStyles method has been removed. Styling is now adopted in createRenderRoot. This method may be overridden to customize this behavior.

• LitElement's static getStyles method has been renamed to static finalizeStyles and now takes a list of styles the user provided and returns the styles which should be used in the element. If this method is overridden to integrate into a style management system, typically the super implementation should be called.

• Removed build support for TypeScript 3.4.

• Decorators are no longer exported from the lit-element module. Instead, import any decorators you use from lit/decorators/*.

• lit-html has been updated to 2.x.

• Support for running in older browsers has been removed from the default configuration. Import the platform-support module to support Shady DOM. Note also that Lit parts inside <style> elements are no longer supported. See Polyfills for more details.

• For simplicity, requestUpdate no longer returns a Promise. Instead await the updateComplete Promise.

• Removed requestUpdateInternal. The requestUpdate method is now identical to this method and should be used instead.

• #2103 15a8356d - Updates the exports field of package.json files to replace the subpath folder mapping syntax with an explicit list of all exported files.

  The /-suffixed syntax for subpath folder mapping originally used in these files is deprecated. Rather than update to the new syntax, this change replaces these mappings with individual entries for all exported files so that (a) users must import using extensions and (b) bundlers or other tools that don't resolve subpath folder mapping exactly as Node.js does won't break these packages' expectations around how they're imported.

Minor Changes

• A public renderOptions class field now exists on LitElement and can be set/overridden to modify the options passed to lit-html.
• Adds static shadowRootOptions for customizing shadowRoot options. Rather than implementing createRenderRoot, this property can be set. For example, to create a closed shadowRoot using delegates focus: static shadowRootOptions = {mode: 'closed', delegatesFocus: true}.
• Adds development mode, which can be enabled by setting the development Node exports condition. See Development and production builds for more details.

Patch Changes

• #1964 f43b811 - Don't publish src/ to npm.
• For efficiency, the css function now maintains a cache and will use a cached value if available when the same style text is requested.
• Fixed reflecting a property when it is set in a setter of another property that is called because its attribute changed (#965).
• Fixed exceptions when parsing attributes from JSON (#722).
• Fixed issue with combining static get properties on an undefined superclass with @property on a subclass ([#890]https://github.com/Polymer/lit-element/issues/890));