Lucien Immink

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.

Why LIT is Fire
#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.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Building with Web Components and the Lit library
06:45 MIN

Building with Web Components and the Lit library

Making of paint.js.org—a Web Component-based Productivity PWA

Simplifying development with Lit and Stencil
00:45 MIN

Simplifying development with Lit and Stencil

Extending HTML with Web Components

Setting up a modern component library with Vite and Lit
04:43 MIN

Setting up a modern component library with Vite and Lit

Building a framework-independent component library

Understanding the role and value of web components
03:17 MIN

Understanding the role and value of web components

Keith Cirkle of GitHub on React Fatigue

Exploring the IBM Carbon Design System as an example
02:32 MIN

Exploring the IBM Carbon Design System as an example

Building a framework-independent component library

Understanding web components and their core technologies
07:10 MIN

Understanding web components and their core technologies

Accessibility with Web Components

Creating modern code islands with web components
03:33 MIN

Creating modern code islands with web components

Defeat that legacy monster! Guerilla refactoring with web standards

Introducing the three core parts of web components
01:12 MIN

Introducing the three core parts of web components

Extending HTML with Web Components

Featured Partners

Related Videos

See all videos
Extending HTML with Web Components
41:54

Extending HTML with Web Components

Rowdy Rabouw

Catching up on the basics you don't really need that much code
14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Building a framework-independent component library
19:46

Building a framework-independent component library

Tobias Scholz

The Lean Web
46:46

The Lean Web

Chris Ferdinandi

Frameworkless: How to use Web-Components in production?
46:39

Frameworkless: How to use Web-Components in production?

Tobias Münch

Web development: where are we, and where are we going?
32:56

Web development: where are we, and where are we going?

Laurie Voss

One Framework To Rule Them All: Faster Websites With Astro
30:42

One Framework To Rule Them All: Faster Websites With Astro

Eddy Vinck

Component styling in a JS world — evolve your mental model
41:28

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Related Articles

View all articles
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?
Luis Minvielle
The Best Upcoming IT Webinars
Now that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
The Best Upcoming IT Webinars
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025
Which frontend frameworks should developers focus on in 2025? We’re listing them for you and showing advantages and drawbacks. You’ll notice we included some libraries as well, because you can’t miss those in 2025.What is the best front end framework...
The Best 7 Frontend Frameworks for Developers in 2025

From learning to earning

Jobs that call for the skills explored in this talk.