Lit

Lit is Google’s small base class for building UI components that are also native Web Components, meaning they work in any browser, with any framework, or with no framework at all. At ~5KB gzipped, it provides reactive state, scoped styles via Shadow DOM, and a template syntax that targets the DOM directly without a virtual layer. Where React and Vue are app frameworks that ship a runtime, Lit is a component primitive that the platform already knows how to render.

Where it fits

Lit fits anywhere the constraint is “this component needs to work across different host environments.” The clearest cases are cross-framework design systems (Adobe Spectrum, Shoelace, GitHub Primer all ship Lit-based components), embeddable widgets that get dropped into other people’s pages, and enterprise apps with long maintenance horizons where framework agnosticism reduces lock-in risk.

For app-level work, routing, state management, full-stack SSR, Lit deliberately doesn’t compete. It’s the component layer that a real framework can sit on top of.

Cost to adopt

Lit is BSD-licensed and free. The real cost is conceptual: teams need to understand Web Components, Shadow DOM, and the slot-based content projection model, none of which are difficult, but all of which differ from React or Vue’s patterns. Shadow DOM has real interoperability quirks (forms must be explicitly delegated, accessibility requires care, CSS inheritance changes shape) that teams should budget time to learn before shipping. For routing, state, or SSR, Lit pairs with whatever app framework you choose, it doesn’t replace those layers.

How it compares

• 

  React, App framework with virtual DOM and component model. Lit components can be consumed in React apps as native elements. Pick React for full apps, Lit for components meant to outlive the app framework.

• 

  Vue, Similar shape (templates, reactive state, scoped styles) but Vue-flavored, not portable. Vue’s scoped CSS is convention; Lit’s Shadow DOM is the platform. Pick Lit for portability, Vue for app-scale ergonomics.

• 

  Angular, Enterprise app framework. Lit and Angular both come from Google but solve different problems. Pick Angular for full apps, Lit when you want portable components Angular can consume.

• 

  Svelte, Smaller bundles than React, comparable in size to Lit. Svelte’s output isn’t standards-based Web Components by default. Pick Svelte for apps, Lit for cross-framework portability.