Lit

Lit is Google’s library for authoring native web components with a reactive base class, a tagged-template-literal HTML renderer, and scoped CSS — without the runtime weight of a full application framework. Because components compile down to standard Custom Elements and Shadow DOM, they interoperate with any framework (or none) and can be dropped into React, Vue, or plain HTML pages alike.

The lit package is the umbrella entry point over the monorepo’s lit-html (templating) and lit-element/@lit/reactive-element (reactive base class) packages, plus a growing set of official add-ons (@lit/context, @lit/task, @lit/localize) for cross-cutting concerns like dependency injection, async state, and i18n.

What You Get

• A LitElement base class with a customizable reactive update lifecycle
• The html/css tagged-template functions from lit-html for declarative, diffed rendering
• Decorators (@property, @state, @query, @customElement) for concise component authoring
• A directive system (repeat, until, classMap, styleMap, ref, guard) for advanced template logic
• Official companion packages for context (@lit/context), async tasks (@lit/task), localization (@lit/localize), and React interop (@lit/react)

Common Use Cases

• Building framework-agnostic, embeddable design-system components shared across multiple frontend stacks
• Authoring lightweight web components for a marketing site or micro-frontend without pulling in a full SPA framework
• Wrapping Lit components for consumption in a React app via @lit/react
• Server-rendering Lit templates with @lit-labs/ssr for content-heavy sites needing hydration

Under The Hood

Architecture: The lit package (packages/lit/src/index.ts) is a thin re-export layer composing three underlying packages in the monorepo: lit-html (packages/lit-html/src/lit-html.ts) handles template parsing/diffing via tagged template literals, @lit/reactive-element provides the low-level reactive-property lifecycle, and lit-element (packages/lit-element) merges the two into LitElement. Directives (packages/lit/src/directives/*.ts — repeat, until, cache, keyed, etc.) plug into the template-diffing engine as first-class extension points rather than special-cased renderer logic.

Tech Stack: Pure TypeScript compiled to ESM-only output, built and tested via Web Test Runner across real browsers rather than jsdom, with a Wireit/npm-workspaces monorepo layout (packages/lit, packages/lit-html, packages/lit-element, packages/labs/*) managed by lerna-style versioning.

Code Quality: lit-html’s test suite alone spans 35+ files including dedicated dev-mode and version-stability tests (lit-html_dev_mode_test.ts, version-stability_test.js), reflecting the project’s zero-tolerance stance on template-diffing regressions given its use at Google-scale. Strict TypeScript typing backs every public decorator and directive.

API Design: The core API surface is deliberately small — extend LitElement, return html\…`fromrender(), declare @property()` fields — pushing advanced behavior (async values, dependency injection, localization) into opt-in companion packages instead of bloating the base class, which keeps the barrier to a first working component very low.