# lit/lit-element

**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-element).**

4,476 stars · 313 forks · TypeScript · BSD-3-Clause

## Links

- GitHub: https://github.com/lit/lit-element
- Homepage: https://lit-element.polymer-project.org
- awesome-repositories: https://awesome-repositories.com/repository/lit-lit-element.md

## Description

Lit-element is a custom element framework and reactive UI library that provides a base class for creating standard HTML elements. It is designed to build web components that automatically update their visual state when internal properties or data change.

The project enables the development of encapsulated components using the shadow root to isolate styles and structure. It utilizes JavaScript template literals to render declarative templates without requiring a compilation step.

The library covers state management through reactive property tracking and the synchronization of JavaScript class properties with HTML attributes. It also includes capabilities for scoping CSS selectors and managing asynchronous rendering cycles to handle interface updates.

## Tags

### Web Development

- [Custom Element Frameworks](https://awesome-repositories.com/f/web-development/custom-element-frameworks.md) — Provides a structured framework for defining properties and attributes for native web components with scoped styles.
- [Custom Elements](https://awesome-repositories.com/f/web-development/web-standards/custom-elements.md) — Enables the creation of standard HTML tags that function as native browser components. ([source](https://lit-element.polymer-project.org/))
- [Shadow DOM Encapsulation](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/ui-component-abstractions/shadow-dom-encapsulation.md) — Uses native shadow roots to isolate component styles and markup from the global document scope.
- [Style Encapsulation](https://awesome-repositories.com/f/web-development/shadow-dom-compatibility/style-encapsulation.md) — Isolates component styles using a shadow root to prevent CSS conflicts with the rest of the web page.
- [Component Property Mappings](https://awesome-repositories.com/f/web-development/standard-html-attribute-mapping/component-property-mappings.md) — Maps internal properties to external attributes using configurable conversion logic for complex data types. ([source](https://lit-element.polymer-project.org/guide/properties))
- [Component Libraries](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/ui-component-abstractions/shadow-dom-encapsulation/component-libraries.md) — Offers a toolkit for developing a library of encapsulated web components using native shadow root isolation.

### Development Tools & Productivity

- [Template Literal Renderers](https://awesome-repositories.com/f/development-tools-productivity/template-string-interpolation/dom-generation/template-literal-renderers.md) — Renders HTML content and expressions using tagged template literals without requiring a compilation step. ([source](https://cdn.jsdelivr.net/gh/lit/lit-element@master/README.md))

### Software Engineering & Architecture

- [Property Reactivity](https://awesome-repositories.com/f/software-engineering-architecture/change-tracking-systems/property-reactivity.md) — Monitors specific class properties and schedules updates whenever their values are modified.
- [Attribute Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/reactive-property-systems/attribute-synchronization.md) — Synchronizes internal JavaScript class properties with external HTML attributes to ensure consistent state across the DOM.

### User Interface & Experience

- [Base Classes](https://awesome-repositories.com/f/user-interface-experience/class-based-components/base-classes.md) — Provides a base class for creating custom HTML elements with built-in reactive properties and declarative rendering.
- [Component State Managers](https://awesome-repositories.com/f/user-interface-experience/component-state-managers.md) — Provides an interface for synchronizing internal component properties with HTML attributes to trigger efficient visual updates.
- [Reactive State Managers](https://awesome-repositories.com/f/user-interface-experience/reactive-state-managers.md) — Synchronizes application data across components via automatic change tracking and efficient re-rendering. ([source](https://lit-element.polymer-project.org/))
- [Reactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-frameworks.md) — Implements a reactive system that automatically updates the user interface whenever the underlying state or data changes.
- [Scoped CSS Isolation](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/scoped-css-isolation.md) — Isolates component styles using a shadow root to prevent CSS leakage into the global scope. ([source](https://lit-element.polymer-project.org/))
- [Tagged Template Literals](https://awesome-repositories.com/f/user-interface-experience/tagged-template-literals.md) — Employs native JavaScript template literals to define HTML structures for components.
- [Reactive Components](https://awesome-repositories.com/f/user-interface-experience/user-interface-components/reactive-components.md) — Builds custom elements that automatically refresh their visual templates when internal state changes. ([source](https://cdn.jsdelivr.net/gh/lit/lit-element@master/README.md))
- [Component Update Optimizations](https://awesome-repositories.com/f/user-interface-experience/component-update-optimizations.md) — Provides mechanisms to control whether a component should re-render by comparing old and new property values. ([source](https://lit-element.polymer-project.org/guide/properties))
- [Dirty Checking Mechanisms](https://awesome-repositories.com/f/user-interface-experience/data-binding/dirty-checking-mechanisms.md) — Compares current and previous property values to determine if a visual refresh of the component is required.
- [Render Batching](https://awesome-repositories.com/f/user-interface-experience/render-batching.md) — Groups multiple state changes into a single asynchronous render cycle to minimize redundant DOM manipulations.