Future-proof your Web Apps with Web Components and LitElement

on YouTube ↗53m

" summary

Shows how LitElement and LitHtml let you write real browser components (custom elements) with shadow DOM encapsulation, ES modules and optional TypeScript decorators. Demonstrates a working GitHub repo lister app that fetches the API, maps attributes to properties, composes repo card components with slots and CSS variables, and updates automatically without a framework. Runs in evergreen browsers (Edge now Chromium) and can fall back to polyfills for IE; tooling suggestions include OpenWC and webcomponents.dev.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to Web Components
2. 8:53Browser Support for Web Components
3. 17:10What is LitElement?
4. 25:03TypeScript with LitElement
5. 29:27Getting Started with OpenWC
6. 32:42Building a GitHub Repo List
7. 38:23Creating Repo Card Component
8. 42:00Adding Filter Functionality
9. 46:20Using ShadowDOM Slots
10. 48:54Custom CSS Properties
11. 51:06Resources and Summary

" related talks

• 46mFuture-proof your Web Apps with Web Components and LitElementKito Mann · RVA JavaScript Conf 2019
• 32m"Future-proof your Web Apps with Web Components and Lit"Kito Mann · Frontrunners 2025
• 02h 32mBuild next gen web apps using web componentsSumit Chaudhari · JSConf.Asia 2019
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 37mThe world of Web ComponentsNishu Goel · AzConf 2020
• 36mThe State of Web ComponentsAna Cidre · CityJS Conference 2020
• 37mUsing Lit and Web Components to build Single-Page ApplicationsMichele Stieven · jsday 2022
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014