Why Lit is 🔥

on YouTube ↗39m

" summary

Lit packages template literals with web components (custom elements + shadow DOM + CSS variables) into a 6 KB runtime — the presenter claims 6.2 KB gzipped overhead — using tagged templates implemented in browser C code for fast DOM diffs. Code examples use decorators and TypeScript, reactive properties and @state, CSS tagged templates, and event listeners like @click. Lit Labs prototypes SSR support (nearing graduation), tooling for routers/virtual scroll, and a Magento storefront proves one web component API sped integration and frontend delivery.

AI-written summary · about

" chapters (18)

1. 0:00Why Lit is powerful
2. 1:06Web components overview
3. 3:55Web platform evolution
4. 7:09DOM manipulation challenges
5. 12:55JavaScript literals
6. 16:51Lit: components + literals
7. 18:18Basic Lit component
8. 21:58Advanced Lit features
9. 23:47Event handling in Lit
10. 25:33CSS literals in Lit
11. 26:40Lit Labs experiments
12. 27:22Learning more about Lit
13. 28:29Q&A: Lit improvements
14. 30:39Q&A: Lit success story
15. 33:30Q&A: Web components myths
16. 34:54Q&A: Web components pain points
17. 36:40Q&A: Lit vs frameworks
18. 38:24Q&A: Web components future

" related talks

• 37mUsing Lit and Web Components to build Single-Page ApplicationsMichele Stieven · jsday 2022
• 32m"Future-proof your Web Apps with Web Components and Lit"Kito Mann · Frontrunners 2025
• 53mFuture-proof your Web Apps with Web Components and LitElementKito Mann · Developer Summit 2020
• 46mFuture-proof your Web Apps with Web Components and LitElementKito Mann · RVA JavaScript Conf 2019
• 17mEfficient, Expressive, and Extensible HTML TemplatesJustin Fagnani-Bell · Polymer Summit 2017
• 45mThe next big thing in (client side) templatingFilip Bruun Bech-Larsen · DevFest Nantes 2018
• 38mThis Is Not a Talk on LitElement, It's a CoursePhilippe Charrière · DevFest Lille 2019
• 02h 32mBuild next gen web apps using web componentsSumit Chaudhari · JSConf.Asia 2019