World of Web Components

on YouTube ↗36m

" summary

Creates a real ES6 web component named beer-falafel, shows the exact code path: self‑invoking function, class extends HTMLElement, constructor, connected/disconnected/adopted callbacks, and open/closed Shadow DOM plus templates and named slots. Deploys components from METRO.digital to a CDN and runs them in production across 13 products, 17 countries with 22 developer teams, cuts component JS load from 91ms → 21ms, reduces network calls ~10x, and proves the approach works at scale.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 0:44Survey
3. 1:12Custom Web Component
4. 1:43Benefits of Custom Web Component
5. 3:19Why It Is Relevant for Web Components
6. 3:48Custom Path
7. 5:00Shadow Dom
8. 9:03Custom Elements
9. 13:02Connected Callback
10. 22:57Basic Web Component
11. 23:25Templates and Slot
12. 24:23Key Learnings

" related talks

• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 01h 48mIntro to Web Components & Polymer WorkshopChris Lorenzo, John Riviello · Node+JS Interactive 2018
• 46mWhat ever happened with Web Components?Dwane Hemmings · Øredev 2023
• 32mLet's talk about Web ComponentsJemima Abu · React Advanced 2021
• 41mComponents Approach to Building Web AppsVinci Rufus · Meta Refresh 2015
• 24mThe Good, The Bad, and The Web ComponentsZach Leatherman · JSHeroes 2023
• 02h 32mBuild next gen web apps using web componentsSumit Chaudhari · JSConf.Asia 2019
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014