# lit/lit

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/lit-lit).**

21,241 stars · 1,047 forks · TypeScript · bsd-3-clause

## Links

- GitHub: https://github.com/lit/lit
- Homepage: https://lit.dev
- awesome-repositories: https://awesome-repositories.com/repository/lit-lit.md

## Topics

`html-templates` `lit` `lit-element` `lit-html`

## Description

Lit is a library for building lightweight, interoperable web components. It provides a base class that leverages native browser APIs to encapsulate state, logic, and styles, allowing developers to create custom elements that function consistently across any modern web project.

The framework distinguishes itself through a reactive property system that automatically triggers efficient, batched DOM updates. By utilizing tagged template literals, it defines declarative UI structures that are compiled into optimized update instructions. Its architecture emphasizes modularity through a reactive controller pattern, which decouples complex logic and lifecycle behaviors from component classes, enabling them to be shared and reused across different elements.

The project covers a comprehensive capability surface for modern UI development, including shadow DOM encapsulation, server-side rendering with hydration support, and sophisticated slot management for content composition. It also provides robust tooling for the entire component lifecycle, featuring build optimization, automated testing utilities, and IDE integration for type-safe authoring.

Comprehensive documentation and standardized packaging guidelines are available to support the distribution of components to registries and their integration into larger design systems.

## Tags

### User Interface & Experience

- [Custom Components](https://awesome-repositories.com/f/user-interface-experience/custom-components.md) — Registers classes as standard browser custom elements to enable the creation of reusable, interoperable UI components. ([source](https://lit.dev/docs/components/defining/))
- [Reactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-frameworks.md) — Manages complex application state and automatic DOM updates through efficient, granular rendering cycles and reactive property systems.
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Creates reusable HTML elements that encapsulate state, logic, and appearance to build modular interfaces for any web environment. ([source](https://lit.dev/docs/components/overview/))
- [Tagged Template Literals](https://awesome-repositories.com/f/user-interface-experience/tagged-template-literals.md) — Defines component structures using tagged template literals that support dynamic expressions for text, attributes, and events. ([source](https://lit.dev/docs/components/rendering/))
- [Reactive State Management](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management.md) — Defines properties that automatically trigger a re-render of the component whenever their values change to keep the interface synchronized. ([source](https://lit.dev/docs/components/overview/))
- [Shadow DOM Utilities](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities.md) — Isolates component styles and internal DOM structures from the global document to prevent style leakage and naming collisions.
- [Isolated UI Components](https://awesome-repositories.com/f/user-interface-experience/isolated-ui-components.md) — Isolates internal DOM trees and styles within shadow roots to prevent external interference. ([source](https://lit.dev/docs/components/rendering/))
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Encapsulates CSS within components using shadow DOM to ensure style isolation and performance across modern web projects. ([source](https://lit.dev/docs/components/styles))
- [Update Batching](https://awesome-repositories.com/f/user-interface-experience/update-batching.md) — Groups multiple state updates into single render cycles to optimize performance and minimize layout thrashing.
- [Component Data Passing](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing.md) — Passes data down to subcomponents via properties and bubbles information up to parents using events to maintain data flow. ([source](https://lit.dev/docs/composition/component-composition/))
- [Design System](https://awesome-repositories.com/f/user-interface-experience/component-libraries/design-system.md) — Creates consistent, encapsulated component libraries that share styles and logic across large-scale applications and diverse development teams.
- [Dynamic Content Updaters](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-updaters.md) — Updates only the specific parts of the DOM that have changed since the last render to ensure high performance. ([source](https://lit.dev/docs/libraries/standalone-templates/))
- [Event Listeners](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling/event-listeners.md) — Registers declarative event handlers on elements that automatically bind to the component instance for simplified interaction management. ([source](https://lit.dev/docs/templates/expressions/))
- [Component Logic Patterns](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-logic-patterns.md) — Decouples complex logic and lifecycle behavior from component classes into reusable, modular objects that share state. ([source](https://lit.dev/docs/api/controllers/))
- [Hydration Utilities](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities/hydration-utilities.md) — Upgrades static server-rendered HTML into interactive components by reattaching shadow roots and event listeners on the client.
- [Web Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/web-component-styling.md) — Defines CSS rules scoped specifically to a component to ensure consistent appearance without leaking styles. ([source](https://lit.dev/docs/components/overview/))
- [Lifecycle Coordinators](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/lifecycle-coordinators.md) — The framework coordinates the lifecycle of asynchronous data fetching by tracking status and triggering component updates when results become available for rendering. ([source](https://lit.dev/docs/data/task/))
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Injects properties, lifecycle overrides, and methods into component prototypes using mixins to share functionality across classes. ([source](https://lit.dev/docs/composition/mixins/))
- [Component Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-wrappers.md) — Generates compatible wrappers for custom elements that map properties and events to idiomatic props and callbacks for other frameworks. ([source](https://lit.dev/docs/frameworks/react/))
- [Conditional Rendering](https://awesome-repositories.com/f/user-interface-experience/conditional-rendering.md) — Selects and displays specific templates or content blocks based on logical conditions, case matching, or asynchronous values. ([source](https://lit.dev/docs/api/directives/))
- [Dynamic Component Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-component-rendering.md) — Injects strings, numbers, and nested templates into the element tree to update the interface based on state. ([source](https://lit.dev/docs/templates/expressions/))
- [Component Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management.md) — Hooks into the element lifecycle to initialize rendering roots, apply styles, and coordinate updates with external controllers. ([source](https://lit.dev/docs/api/LitElement/))
- [Component Theming](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/component-theming.md) — Exposes CSS custom properties to allow external customization of component appearance through standard CSS inheritance and variable overrides. ([source](https://lit.dev/docs/components/styles))
- [Content Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling.md) — Targets and styles direct children passed into component placeholders using specialized pseudo-elements for flexible content composition. ([source](https://lit.dev/docs/components/styles))
- [Asynchronous Content Rendering](https://awesome-repositories.com/f/user-interface-experience/asynchronous-content-rendering.md) — Displays placeholder content while waiting for promises to resolve, updating the view automatically once data is available. ([source](https://lit.dev/docs/templates/directives/))
- [Component Inheritance](https://awesome-repositories.com/f/user-interface-experience/component-inheritance.md) — Applies reusable class definitions to the inheritance chain to add public methods or granular lifecycle control to a component. ([source](https://lit.dev/docs/composition/overview/))
- [Component Lifecycle Controllers](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-controllers.md) — Registers external logic modules to participate in the component lifecycle for modular behavior and shared state management. ([source](https://lit.dev/docs/api/ReactiveElement/))
- [Component Communication](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/communication-data-flow/component-communication.md) — Coordinates interactions between sibling components by using a parent or external store to manage state and propagate updates. ([source](https://lit.dev/docs/composition/component-composition/))
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-lifecycle-hooks.md) — Executes custom logic at specific stages of a component's existence, such as when it is added to the page or updates. ([source](https://lit.dev/docs/components/overview/))
- [Rendering Optimization](https://awesome-repositories.com/f/user-interface-experience/rendering-optimization.md) — Avoids redundant render cycles by guarding against value changes and comparing new data against the current state. ([source](https://lit.dev/docs/api/directives/))
- [Rendering Root Configurations](https://awesome-repositories.com/f/user-interface-experience/rendering-root-configurations.md) — The framework configures the DOM node used as the root for component rendering to support alternative encapsulation or non-shadow environments. ([source](https://lit.dev/docs/components/shadow-dom/))
- [Dynamic Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems.md) — Updates element classes and inline styles programmatically based on component state using dedicated template directives. ([source](https://lit.dev/docs/api/directives/))
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Applies scoped CSS styles to components to ensure consistent visual presentation without leaking styles to the rest of the page. ([source](https://lit.dev/docs/api/LitElement/))
- [Markup Injection Directives](https://awesome-repositories.com/f/user-interface-experience/template-injection-hooks/markup-injection-directives.md) — The framework renders strings or template elements directly as HTML or SVG content instead of treating them as plain text. ([source](https://lit.dev/docs/api/directives/))
- [Virtualized Lists](https://awesome-repositories.com/f/user-interface-experience/virtualized-lists.md) — Renders only the visible portion of long datasets to maintain high performance and reduce memory usage. ([source](https://lit.dev/docs/libraries/labs/))

### Web Development

- [Component Libraries](https://awesome-repositories.com/f/web-development/component-libraries.md) — Ships a lightweight base class for building fast, reactive, and interoperable custom elements.
- [Web Components](https://awesome-repositories.com/f/web-development/web-components.md) — Provides a base class for building reusable, interoperable UI elements that encapsulate state, logic, and styles.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Generates static HTML markup for custom elements on the server to improve initial page load performance and search engine visibility.
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Enables building complex user interfaces by nesting and combining smaller, reusable template fragments into a single component structure. ([source](https://lit.dev/docs/components/rendering/))
- [Custom Element Registries](https://awesome-repositories.com/f/web-development/custom-element-registries.md) — Offers a toolkit for defining and registering reusable custom elements that encapsulate state and logic. ([source](https://lit.dev/docs/api/decorators/))
- [Dynamic Template Rendering](https://awesome-repositories.com/f/web-development/dynamic-template-rendering.md) — Constructs dynamic user interfaces using tagged template literals that efficiently update only changed DOM parts. ([source](https://lit.dev/docs/libraries/standalone-templates/))
- [Cross-Framework](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/web-components/cross-framework.md) — Wraps custom elements to ensure seamless compatibility and data binding when used within other popular JavaScript frameworks and libraries.
- [Internal State Definitions](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/internal-state-definitions.md) — The framework declares private reactive properties that trigger component re-renders when modified without exposing them as public HTML attributes. ([source](https://lit.dev/docs/api/decorators/))
- [Standard HTML Attribute Mapping](https://awesome-repositories.com/f/web-development/standard-html-attribute-mapping.md) — Maps HTML attributes to component properties and reflects property changes back to the DOM for styling or external access. ([source](https://lit.dev/docs/components/properties/))
- [Dynamic List Rendering](https://awesome-repositories.com/f/web-development/dynamic-list-rendering.md) — Transforms arrays or iterables into UI elements by mapping items to templates and automatically updating the DOM when data changes. ([source](https://lit.dev/docs/templates/lists/))
- [Server-Side Rendering Utilities](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities.md) — Provides utilities for generating static HTML from web components to improve initial load performance.
- [Hydration Upgraders](https://awesome-repositories.com/f/web-development/server-side-rendering/hydration-upgraders.md) — Activates component lifecycles and shadow root reactivity for elements initially rendered as static HTML on the server. ([source](https://lit.dev/docs/ssr/client-usage/))
- [Reactive Binding Updates](https://awesome-repositories.com/f/web-development/template-data-binding/reactive-binding-updates.md) — Refreshes only the specific template bindings that change when associated data signals update to minimize unnecessary re-rendering. ([source](https://lit.dev/docs/data/signals/))
- [Collection Iterators](https://awesome-repositories.com/f/web-development/collection-iterators.md) — Transforms an iterable into a series of rendered elements, optionally using keys to maintain DOM stability during updates. ([source](https://lit.dev/docs/templates/directives/))
- [Custom Directives](https://awesome-repositories.com/f/web-development/custom-directives.md) — Defines reusable logic for DOM manipulation by extending a base class to handle complex rendering tasks. ([source](https://lit.dev/docs/api/custom-directives/))
- [Scoped Registries](https://awesome-repositories.com/f/web-development/custom-element-registries/scoped-registries.md) — Integrates components with scoped registries to prevent naming collisions and enable isolated component definitions within specific DOM subtrees. ([source](https://lit.dev/docs/libraries/labs/))
- [Directive Systems](https://awesome-repositories.com/f/web-development/dom-manipulation/directive-systems.md) — Provides a hook-based mechanism to perform imperative DOM updates or complex rendering logic directly within template expressions.
- [Keyed List Reconciliation](https://awesome-repositories.com/f/web-development/dom-patching/list-patching/keyed-list-reconciliation.md) — Reorders existing DOM nodes based on unique item keys to perform efficient list mutations without recreating elements. ([source](https://lit.dev/docs/templates/lists/))
- [User Interface Localization](https://awesome-repositories.com/f/web-development/internationalization-localization/core-localization-frameworks/user-interface-localization.md) — Switches between generated locale modules to update component templates dynamically when the active language changes. ([source](https://lit.dev/docs/localization/runtime-mode/))
- [Observable State Patterns](https://awesome-repositories.com/f/web-development/observable-state-patterns.md) — Defines reactive class properties that notify observers automatically when their values are mutated or updated. ([source](https://lit.dev/docs/data/signals/))
- [Signal Lifecycle Integrators](https://awesome-repositories.com/f/web-development/reactive-signals/signal-lifecycle-integrators.md) — Triggers automatic component re-renders when accessed signals change by integrating reactive state tracking into the component lifecycle. ([source](https://lit.dev/docs/data/signals/))
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering.md) — Generates HTML strings from component templates in a server-side environment by processing custom elements. ([source](https://lit.dev/docs/ssr/server-usage/))
- [Pre-rendering](https://awesome-repositories.com/f/web-development/server-side-rendering/pre-rendering.md) — Generates static HTML for components during the build process to improve initial load performance. ([source](https://lit.dev/docs/libraries/labs/))
- [Change Observers](https://awesome-repositories.com/f/web-development/change-observers.md) — Tracks and responds to changes in data or DOM state by using platform observer objects through reactive controllers. ([source](https://lit.dev/docs/libraries/labs/))
- [Element Attributes](https://awesome-repositories.com/f/web-development/element-attributes.md) — Sets or removes element attributes based on whether a provided value is defined, ensuring clean DOM output. ([source](https://lit.dev/docs/api/directives/))
- [DOM Emulation](https://awesome-repositories.com/f/web-development/server-side-rendering/dom-emulation.md) — Provides minimal DOM shims and custom element registries in server-side environments to allow components to function without a browser. ([source](https://lit.dev/docs/ssr/dom-emulation/))
- [Streaming Server-Side Rendering](https://awesome-repositories.com/f/web-development/streaming-server-side-rendering.md) — Pipes rendered component output into a readable stream to support efficient delivery through HTTP servers. ([source](https://lit.dev/docs/ssr/server-usage/))

### Software Engineering & Architecture

- [Reactive Component Models](https://awesome-repositories.com/f/software-engineering-architecture/reactive-component-models.md) — Creates custom web elements that automatically update their DOM representation when internal state or properties change. ([source](https://lit.dev/docs/api/LitElement/))
- [Reactive Property Systems](https://awesome-repositories.com/f/software-engineering-architecture/reactive-property-systems.md) — Declares reactive properties that trigger efficient, batched DOM updates whenever values change. ([source](https://lit.dev/docs/components/decorators/))
- [Signals & Reactivity](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/signals-reactivity.md) — Connects state management systems based on the signals proposal to component properties for efficient and fine-grained reactivity. ([source](https://lit.dev/docs/libraries/labs/))
- [Reactive Update Scheduling](https://awesome-repositories.com/f/software-engineering-architecture/reactive-update-scheduling.md) — Triggers an asynchronous update cycle when properties change, batching modifications to efficiently re-render the DOM. ([source](https://lit.dev/docs/components/lifecycle/))
- [Change Detection](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection.md) — Overrides default equality checks to control exactly when a property change triggers an update cycle for the component. ([source](https://lit.dev/docs/components/properties/))
- [Property Change Observers](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection/property-change-observers.md) — Defines custom logic to determine whether a property value has changed, allowing for fine-grained control over re-renders. ([source](https://lit.dev/docs/api/misc/))
- [Asynchronous Task Managers](https://awesome-repositories.com/f/software-engineering-architecture/asynchronous-task-managers.md) — Bundles network requests or long-running computations into objects that track state and trigger component updates automatically. ([source](https://lit.dev/docs/composition/controllers/))
- [Attribute Management](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/object-oriented-foundations/object-oriented-programming/attribute-management.md) — Sets an attribute only if the provided value is defined, removing the attribute entirely if the value is null or undefined. ([source](https://lit.dev/docs/templates/directives/))
- [Task State Renderers](https://awesome-repositories.com/f/software-engineering-architecture/asynchronous-task-managers/task-state-renderers.md) — Provides declarative templates for rendering various task outcomes including pending, complete, and error states. ([source](https://lit.dev/docs/data/task/))
- [Asynchronous Update Hooks](https://awesome-repositories.com/f/software-engineering-architecture/component-lifecycle-management/asynchronous-update-hooks.md) — Handles component lifecycle events by implementing hooks that trigger when rendering state changes. ([source](https://lit.dev/docs/api/custom-directives/))
- [Component Data Injection](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/component-data-injection.md) — Injects data into a component subtree so that nested elements can access shared state without manual property binding. ([source](https://lit.dev/docs/data/context/))
- [Attribute Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/reactive-property-systems/attribute-synchronization.md) — Declares component properties that trigger automatic UI updates and optionally synchronize with corresponding HTML attributes. ([source](https://lit.dev/docs/api/decorators/))
- [Component Slots](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/ui-architectures-patterns/component-slots.md) — Defines placeholders within component templates to render and position child elements provided by the consumer. ([source](https://lit.dev/docs/components/shadow-dom/))

### Graphics & Multimedia

- [Surgical DOM Update Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/surgical-dom-update-engines.md) — Batches reactive property changes and performs granular updates to only the modified parts of the DOM. ([source](https://lit.dev/docs/components/rendering/))
- [DOM Reconciliation](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/surgical-dom-update-engines/dom-reconciliation.md) — Updates an attribute or property only if it differs from the current live DOM value, preventing conflicts with external DOM changes. ([source](https://lit.dev/docs/templates/directives/))

### Development Tools & Productivity

- [Template Compilation Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools.md) — Transforms template expressions into efficient code to improve runtime execution speed and reduce rendering overhead. ([source](https://lit.dev/docs/libraries/labs/))
- [Web Component Testing Suites](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/test-execution-management/test-suites/web-component-testing-suites.md) — Includes tools and configurations for validating custom element behavior, lifecycle hooks, and rendering across browsers.
- [Component Localization](https://awesome-repositories.com/f/development-tools-productivity/localization-support/component-localization.md) — Wraps strings and templates in a function to enable multi-language support with automatic re-rendering and native expression handling. ([source](https://lit.dev/docs/localization/overview/))

### Testing & Quality Assurance

- [End-to-End Testing](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/e2e-integration-testing/end-to-end-testing.md) — Automates user-facing workflows across the application to validate component integration and overall system functionality. ([source](https://lit.dev/docs/tools/testing/))
- [Browser and UI Testing](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/test-frameworks/browser-and-ui-testing.md) — Runs component and unit tests directly in the browser environment to verify custom element behavior and shadow DOM interactions. ([source](https://lit.dev/docs/tools/testing/))
- [Component Testing Frameworks](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/test-frameworks/test-levels-and-types/component-testing-frameworks.md) — Validates component behavior across modern and legacy browsers using recommended testing frameworks and configurations. ([source](https://lit.dev/docs/tools/overview/))

### DevOps & Infrastructure

- [Build Optimization](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-optimization.md) — Bundles and optimizes code for deployment, including differential serving strategies to ensure compatibility across different browser environments. ([source](https://lit.dev/docs/tools/overview/))

### Programming Languages & Runtimes

- [Component Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/type-systems/typescript-declaration-tooling/component-type-definitions.md) — Maps custom element tag names to class types to provide accurate autocompletion and static analysis for developers. ([source](https://lit.dev/docs/components/defining/))

### System Administration & Monitoring

- [Rendering Context Detection](https://awesome-repositories.com/f/system-administration-monitoring/environment-detection-tools/rendering-context-detection.md) — Identifies whether the current execution context is a server or a browser to allow for environment-specific logic during component rendering. ([source](https://lit.dev/docs/api/misc/))