# Lit

## Docs

- [@customElement](https://mintlify.wiki/lit/lit/api/decorators/custom-element.md): Class decorator that defines a custom element and registers it with the browser.
- [@eventOptions](https://mintlify.wiki/lit/lit/api/decorators/event-options.md): Decorator that attaches addEventListener options to a method used as an event listener in a Lit template.
- [@property](https://mintlify.wiki/lit/lit/api/decorators/property.md): Decorator that declares a public reactive property, optionally backed by an observed HTML attribute.
- [Query decorators](https://mintlify.wiki/lit/lit/api/decorators/query.md): Decorators for querying elements in the render root or slot assignments: @query, @queryAll, @queryAsync, @queryAssignedElements, @queryAssignedNodes.
- [@state](https://mintlify.wiki/lit/lit/api/decorators/state.md): Decorator that declares a private reactive property that triggers updates but is not exposed as an HTML attribute.
- [Async directives](https://mintlify.wiki/lit/lit/api/directives/async-directives.md): Directives for rendering values from Promises and async iterables — until, asyncAppend, and asyncReplace — plus the AsyncDirective base class.
- [cache](https://mintlify.wiki/lit/lit/api/directives/cache.md): A directive that caches rendered DOM when switching between templates, avoiding expensive re-creation.
- [classMap](https://mintlify.wiki/lit/lit/api/directives/class-map.md): A directive that applies dynamic CSS classes to an element based on a key-value object.
- [guard](https://mintlify.wiki/lit/lit/api/directives/guard.md): A directive that prevents re-evaluation of a template function until one or more dependencies change.
- [live](https://mintlify.wiki/lit/lit/api/directives/live.md): A directive that checks the live DOM value of a binding rather than the previously set value, ensuring the DOM stays in sync with your template.
- [ref](https://mintlify.wiki/lit/lit/api/directives/ref.md): A directive that provides a reference to a rendered DOM element.
- [repeat](https://mintlify.wiki/lit/lit/api/directives/repeat.md): A directive that efficiently renders and updates a list of items using key-based DOM diffing.
- [styleMap](https://mintlify.wiki/lit/lit/api/directives/style-map.md): A directive that applies dynamic inline CSS styles to an element from a key-value object.
- [lit](https://mintlify.wiki/lit/lit/api/lit.md): API reference for the lit package, the main entry point for Lit web components.
- [LitElement](https://mintlify.wiki/lit/lit/api/lit-element.md): API reference for the LitElement base class for building reactive web components with lit-html templates.
- [lit-html](https://mintlify.wiki/lit/lit/api/lit-html.md): API reference for the lit-html library — efficient, expressive HTML templating for the browser.
- [ReactiveController](https://mintlify.wiki/lit/lit/api/reactive-controller.md): Interfaces for building composable reactive controllers that integrate with the ReactiveElement lifecycle.
- [ReactiveElement](https://mintlify.wiki/lit/lit/api/reactive-element.md): Base class for reactive custom elements. Manages properties, attributes, and the async update lifecycle.
- [Components](https://mintlify.wiki/lit/lit/concepts/components.md): Learn how to define Lit components by extending LitElement, structuring your class, and using Shadow DOM encapsulation.
- [Lifecycle](https://mintlify.wiki/lit/lit/concepts/lifecycle.md): Understand the full Lit component lifecycle — from connection callbacks through the reactive update cycle to post-render hooks and the updateComplete promise.
- [Reactive properties](https://mintlify.wiki/lit/lit/concepts/reactive-properties.md): Understand how to declare reactive properties and internal state in Lit, configure property options, and work with the property update cycle.
- [Styles](https://mintlify.wiki/lit/lit/concepts/styles.md): Learn how to add scoped styles to Lit components with the css tag, use Shadow DOM encapsulation, apply CSS custom properties for theming, and share styles across components.
- [Templates](https://mintlify.wiki/lit/lit/concepts/templates.md): Learn how to use Lit's html tagged template literal to declare efficient, expressive UI with binding expressions for text, attributes, properties, events, and children.
- [Built-in controllers](https://mintlify.wiki/lit/lit/controllers/built-in-controllers.md): Ready-made reactive controllers for common browser APIs — ResizeObserver, MutationObserver, IntersectionObserver, PerformanceObserver — plus task management and context.
- [Controllers overview](https://mintlify.wiki/lit/lit/controllers/overview.md): Use reactive controllers to organize and reuse stateful logic across Lit components without inheritance.
- [Migration](https://mintlify.wiki/lit/lit/guides/migration.md): Upgrading Lit components between major versions, including changes from Lit 2.x to Lit 3.x, and from lit-element 2.x and lit-html 1.x.
- [Publishing](https://mintlify.wiki/lit/lit/guides/publishing.md): How to package and publish Lit web components as npm packages, including exports, TypeScript declarations, bundling, and peer dependencies.
- [Testing](https://mintlify.wiki/lit/lit/guides/testing.md): Testing Lit web components with Web Test Runner, @open-wc/testing, and @lit-labs/testing.
- [TypeScript](https://mintlify.wiki/lit/lit/guides/typescript.md): Using TypeScript with Lit to get type safety, decorator support, and better tooling for your web components.
- [Installation](https://mintlify.wiki/lit/lit/installation.md): Add Lit to your project via npm, CDN, or a bundler.
- [Introduction](https://mintlify.wiki/lit/lit/introduction.md): Lit is a simple library for building fast, lightweight web components.
- [Context](https://mintlify.wiki/lit/lit/libraries/context.md): Share data across a component tree without prop drilling using @lit/context.
- [Localize](https://mintlify.wiki/lit/lit/libraries/localize.md): Translate strings and templates in Lit components using @lit/localize.
- [React integration](https://mintlify.wiki/lit/lit/libraries/react-integration.md): Wrap Lit web components for use in React with full prop and event support using @lit/react.
- [Task](https://mintlify.wiki/lit/lit/libraries/task.md): Manage async data fetching with loading and error states using @lit/task.
- [Quickstart](https://mintlify.wiki/lit/lit/quickstart.md): Build your first Lit web component in minutes.
- [Getting started with SSR](https://mintlify.wiki/lit/lit/ssr/getting-started.md): How to install @lit-labs/ssr and render Lit components on the server, including streaming, string collection, Express.js, Next.js, and Eleventy integrations.
- [Hydration](https://mintlify.wiki/lit/lit/ssr/hydration.md): How to hydrate server-rendered Lit components on the client using @lit-labs/ssr-client, including LitElement auto-hydration, the DSD polyfill, and common pitfalls.
- [SSR overview](https://mintlify.wiki/lit/lit/ssr/overview.md): An overview of server-side rendering for Lit components, including how @lit-labs/ssr works, declarative shadow DOM, and available integrations.
- [Built-in directives](https://mintlify.wiki/lit/lit/templates/built-in-directives.md): Complete reference for all built-in Lit directives — styling, rendering control, lists, refs, DOM, async, and forms.
- [Conditionals](https://mintlify.wiki/lit/lit/templates/conditionals.md): Render different content based on conditions in Lit templates using ternaries, when(), choose(), ifDefined(), and cache().
- [Expressions](https://mintlify.wiki/lit/lit/templates/expressions.md): All binding types available in Lit templates — child content, attributes, properties, events, and element bindings.
- [Lists](https://mintlify.wiki/lit/lit/templates/lists.md): Render and efficiently update lists and iterables in Lit templates using arrays, repeat(), map(), range(), and join().