> Markdown version of [/videos/774-why-lit-is-fire?t=1218](https://www.wearedevelopers.com/videos/774-why-lit-is-fire?t=1218). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Why LIT is Fire Tired of a bloated Virtual DOM slowing down your web apps? Discover how Lit uses native Web Components to deliver blazing-fast performance with just six kilobytes of overhead. - **Speakers:** Lucien Immink - **Event:** World Congress 2023 - **Published:** October 23, 2023 - **Duration:** 31:56 - **URL:** https://www.wearedevelopers.com/videos/774-why-lit-is-fire ## Summary Historically, manipulating the DOM required clunky abstractions, leading to bloated libraries or mismatched syntaxes like JSX where developers write HTML as JavaScript. Lit solves this by bridging native Web Components with ES6 tagged template literals, providing a framework-agnostic way to build encapsulated, high-performance UI components. By mapping fixed elements and dynamic variables directly through the browser's native C-level code, Lit intelligently updates only the parts of the DOM that change. This eliminates the need for a cumbersome Virtual DOM, keeping the library's overhead to only six kilobytes. Developers combine custom elements, Shadow DOM encapsulation, and CSS variables seamlessly, writing standard HTML and valid CSS without abandoning the JavaScript ecosystem. Beyond core rendering, the Lit Labs ecosystem offers advanced application tooling, including server-side rendering, complex motion animations, client-side routing, and React wrapper support. For massive datasets, such as a 1-million line code editor or an endless catalog of music, Lit Labs provides a Virtualizer that dramatically improves app performance by exclusively rendering and dynamically updating items within the visible viewport. Ultimately, Lit provides a highly performant, browser-native foundation ideal for building overarching design systems that intentionally decouple reusable view-layer UI components from complex client-side business logic. **Keywords:** es6 template literals, lit library performance, web components encapsulation, shadow dom rendering, css variables styling, custom element decorators, virtual dom alternatives, lightweight ui frameworks, tagged template functions, framework-agnostic design systems, lit labs features, react component wrappers, server-side rendering ssr, viewport virtualization, native browser apis, dom manipulation frameworks, client-side routing ## Chapters 1. **Evolution of web platform features and native capabilities** (00:03) — How browsers integrated native capabilities to replace external plugins like Flash. 1. **Building isolated UI elements using standard web components** (03:47) — An overview of how web components encapsulate HTML templates, custom elements, and styling. 1. **Challenges of vanilla DOM manipulation and string-based HTML** (05:39) — Why traditional DOM updates, manual element creation, and libraries like jQuery fall short. 1. **Leveraging JavaScript template literals for efficient DOM updates** (07:13) — How native template literals process fixed templates and variable values at the C-code level. 1. **Origins and design philosophy of the Lit library** (10:43) — How Lit combines lit-html and lit-element while staying close to native browser APIs. 1. **Creating a reactive hello world component with Lit** (12:40) — A practical walkthrough of importing Lit, using decorators, and writing reactive component properties. 1. **Performance benefits and the absence of virtual DOM** (15:15) — How low overhead and native browser partial rendering capabilities render virtual DOMs unnecessary. 1. **Composing applications with nested Lit elements and slots** (16:51) — Building modular user interfaces by extending and composing smaller reusable Lit components. 1. **Managing local state and event listeners in Lit components** (18:12) — Implementing interactive components by attaching native event listeners and defining reactive internal state. 1. **Encapsulating CSS styles and variables within Lit components** (20:18) — Defining valid CSS inside JavaScript literals to scope styling securely inside components. 1. **Exploring experimental features and integrations with Lit Labs** (22:19) — A look at upcoming Lit capabilities including React integration, server-side rendering, and client-side routing. 1. **Optimizing long list rendering by implementing Lit virtualizer** (26:22) — How the virtualizer component keeps interfaces snappy by rendering only the list items currently visible in the viewport. 1. **Resources for getting started and audience Q&A session** (28:57) — Closing resources for developers and answers regarding CSS runtime transforms and shadow DOM implementations. ## Related Moments - [Building framework-less architectures with native custom web components](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA") - [Comparing vanilla web component code to Lit implementations](https://www.wearedevelopers.com/videos/1679-building-a-framework-independent-component-library) (from "Building a framework-independent component library") - [Reviewing alternative template engines and lightweight JavaScript libraries](https://www.wearedevelopers.com/videos/1427-how-to-kill-javascript-from-your-stack-with-htmx-and-kotlin) (from "How to kill JavaScript from your Stack with HTMX and Kotlin") - [Simplifying component development with Vite and Lit](https://www.wearedevelopers.com/videos/1679-building-a-framework-independent-component-library) (from "Building a framework-independent component library") - [Reducing JavaScript dependencies with native HTML and CSS](https://www.wearedevelopers.com/videos/1806-nolojs-avoiding-javascript-cruft-with-html-and-css-aaron-t-grogg) (from "NoLoJS - Avoiding JavaScript Cruft with HTML and CSS - Aaron T. Grogg") - [The rise of modern component-based frameworks and modular architecture](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living") ## Related Articles - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) - [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us) - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents) ## Related Jobs - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda** - [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**