The Road to Native Web Components

on YouTube ↗36m

" summary

Claims that native web components are four concrete specs — HTML templates, HTML imports, custom elements and shadow DOM — and shows how Chrome (and Firefox behind a flag) implements them today while frameworks map those ideas to Polymer, Ember (engines and just-in-time templates), Angular and React (Webpack and CSS modules). Demonstrates a three‑step hamburger menu component moved into a single HTML import that clones template into a shadow root and mostly works in Chrome though the hosted demo asset expired.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 13:32SHADOW DOM
3. 24:10CUSTOM ELEMENTS
4. 27:55HOW DO FRAMEWORKS HANDLE THIS?

" related talks

• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014
• 32mLet's talk about Web ComponentsJemima Abu · React Advanced 2021
• 31mNative Web Components - All Frameworks InvitedMichael Collins · UtahJS Conf 2018
• 37mThe world of Web ComponentsNishu Goel · AzConf 2020
• 19mWeb ComponentsJeff Tapper · FITC Web Unleashed 2014
• 24mWeb Components: It's all rainbows and unicorns! Is it?Sara Harkousse · RuhrJS 2017
• 45mLet's Talk About Web ComponentsJemima Abu · NDC Porto 2022
• 36mThe State of Web ComponentsAna Cidre · CityJS Conference 2020