Why LIT is Fire

Ditch the virtual DOM. Lit delivers high-performance updates by using native browser features to build fast, lightweight web components that work everywhere.

#1about 4 minutes

Understanding the core principles of web components

Web components provide a standard way to create encapsulated, reusable UI elements using custom elements, HTML templates, and the shadow DOM.

#2about 6 minutes

Why template literals are a game changer for DOM manipulation

Template literals offer a secure and efficient alternative to traditional DOM manipulation by separating static strings from dynamic values at a native browser level.

#3about 5 minutes

Building your first reactive component with Lit

A step-by-step guide to creating a basic Lit component using decorators for properties and custom elements, highlighting its efficient, virtual DOM-free rendering.

#4about 5 minutes

Managing state, composition, and styling in Lit

Learn to build more complex UIs by composing components, managing internal state with the @state decorator, and applying encapsulated styles using CSS literals.

#5about 5 minutes

Exploring experimental features with Lit Labs

An overview of the Lit Labs ecosystem, which provides experimental packages for tasks like server-side rendering, animations, routing, and React integration.

#6about 3 minutes

Building high-performance lists with the virtualizer lab

The virtualizer lab enables rendering of massive lists with high performance by only rendering the items currently visible in the viewport.

#7about 3 minutes

Q&A on Lit's practical applications and architecture

Discussion covers how Lit handles CSS, its default use of the shadow DOM, and its suitability for separating UI from complex business logic in large applications.