Web Components

on YouTube ↗24m

" summary

Chrome Canary requires enabling flags and the polyl polyfill to exercise Shadow DOM, CSS Variables, Regions and custom filters; the implementation is Chrome‑only and hard to debug. Concrete demos show custom elements with lifecycle callbacks, regions flowing content into named containers, CSS vars scoped by selector, shaders applied via a filter URL and live text preserved. Several features fail or are incomplete (animations, @font‑face, accessibility) so experiments work but are not production ready.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 2:02Messy web development solution
3. 3:49Chrome Canary setup
4. 4:32Core specs
5. 6:16Custom elements
6. 8:06CSS Regions integration
7. 12:07CSS Variables role
8. 14:15Custom Filters effects
9. 16:44Reusing components
10. 19:18Shadow DOM styling limits
11. 20:42Resources and communities
12. 21:46Test the Web Forward call
13. 22:23Q&A

" related talks

• 32mFuture CSS in Web ComponentsPeter Gasston · CSSConf EU 2013
• 42mThe Good, The Bad, The Web ComponentsZach Leatherman · SmashingConf Freiburg 2023
• 42mWeb components and the future of web developmentVarunkumar Nagarajan · Meta Refresh 2013
• 16mWeb ComponentsMark Dalgleish · Web Directions South 2013
• 24mWeb Components: It's all rainbows and unicorns! Is it?Sara Harkousse · RuhrJS 2017
• 39mWeb components - A whirlwind tourMartin Naumann · Jazoon TechDays Spring 2016 Bern
• 51mCSS in 2023 and beyondAnton Ball · NDC Oslo 2023
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014