Web components and the future of web development
summary
Describes concrete Web Components features and limits: native templates stop parsing and preloading until cloning, Shadow DOM hides implementation and scopes styles while offering insertion points for selected light DOM, and mutation observers dramatically reduce callbacks — a demo rearranging 15 cricket players fires ~2,000 mutation events with old APIs but yields a single batched callback with observers. Notes current availability (shadow DOM and observers in Chrome Canary), and practical use via polyfills like X-tags.
AI-written summary · about
chapters (19)
- 0:00Start
- 1:04Once upon a time...
- 1:49Today's Web...
- 2:48With great power, comes great responsibility
- 4:40What's missing?
- 6:10Modularize the Web
- 7:49The templates of today
- 10:46What do we have in JS space?
- 15:43Templating of the near future.
- 20:49Attaching Shadow DOM to a host
- 24:10Creating Shadow DOM
- 24:40Style encapsulation
- 25:30Style hooks using CSS Variables
- 26:16Shadow DOM insertion points
- 27:46Mutation Observers vs. Mutation Events
- 28:59Object.observe()
- 30:07Creating custom elements
- 31:22Demo
- 36:58Resources
related talks
59mIntroduction to Web Components
36mWeb components - A whirlwind tour thru the future of the web
42mThe Good, The Bad, The Web Components
29mWhen to Use Web Components
44mWeb Components An Introduction to the Future
24mThe Good, The Bad, and The Web Components
39mWeb components - A whirlwind tour
46mWhat ever happened with Web Components?