lit-html
Advanced tools
Package description
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.
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}`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 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 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.
hyperHTML is a lightweight library for creating hyper textual content. It shares a similar philosophy with lit-html, focusing on tagged template literals as a means to render and update the DOM efficiently. Both libraries aim to be minimalistic and performant.
Changelog
lit-element - 3.0.0
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.
renderOptions class field now exists on LitElement and can be set/overridden to modify the options passed to lit-html.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}.development Node exports condition. See Development and production builds for more details.f43b811 - Don't publish src/ to npm.css function now maintains a cache and will use a cached value if available when the same style text is requested.static get properties on an undefined superclass with @property on a subclass ([#890]https://github.com/Polymer/lit-element/issues/890));Readme
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.
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:
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.
Full documentation is available at lit.dev.
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.$ npm install lit-html
Or use from lit:
$ npm install lit
Please see CONTRIBUTING.md.
FAQs
Unknown package
The npm package lit-html receives a total of 1,799,619 weekly downloads. As such, lit-html popularity was classified as popular.
We found that lit-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.