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.

job ad

Saby Company

Saby Company
Delebio, Italy

Remote
Intermediate
Node.js

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
Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

The Lean Web46:46

The Lean Web

Chris Ferdinandi

Unlocking Seamless Collaboration: Design-First APIs for UI Components28:35

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

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

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

Chris Heilmann

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

Frameworkless: How to use Web-Components in production?

Tobias Münch

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

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Related Articles

View all articles
DC
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?
EM
Eli McGarvie
Top 10 Svelte UI Libraries in 2025
As Svelte gains traction among developers for its impressive performance and simplicity, the need for robust UI libraries becomes increasingly apparent. UI libraries can provide developers with the necessary building blocks to easily create beautiful...
Top 10 Svelte UI Libraries in 2025
LM
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.