"Future-proof your Web Apps with Web Components and Lit"

on YouTube ↗32m

" summary

Explains that web components are browser standards (custom elements, shadow DOM, templates), shows code that registers a custom element and a Lit rewrite, and demonstrates a working GitHub repo browser that fetches and filters repos by topic. Claims lit makes property/attribute sync and uses decorators, template tag literals, and CSS custom properties; reports 20% of sites use web components. Shows that components run in the real DOM, slot and event communication works, and the demo actually fetches live GitHub data.

AI-written summary · about

" chapters (11)

1. 0:00Web Components & Lit intro
2. 1:32What are Web Components
3. 3:57Key features: Custom Elements, Templates, Shadow DOM
4. 8:12Browser support for Web Components
5. 9:38Build a Web Component from scratch
6. 13:56Simplify with Lit library
7. 17:07Lit: features and benefits
8. 21:47Real-world Web Components use
9. 22:49Live demo: GitHub search with Lit
10. 30:15Why Lit & Web Components
11. 31:20Q&A

" related talks

• 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
• 02h 32mBuild next gen web apps using web componentsSumit Chaudhari · JSConf.Asia 2019
• 39mWhy Lit is 🔥Lucien Immink · Frontend Nation 2024
• 37mUsing Lit and Web Components to build Single-Page ApplicationsMichele Stieven · jsday 2022
• 44mWeb Components An Introduction to the FutureTobias Ljungstrom · NDC Oslo 2021
• 37mThe world of Web ComponentsNishu Goel · AzConf 2020
• 24mThe Good, The Bad, and The Web ComponentsZach Leatherman · JSHeroes 2023