Web Components: It’s about Time
summary
Builds a working social‑post web component live: a custom element with an emoji picker child, uses custom elements and shadow DOM, CSS custom properties for theming, slots to surface light DOM content, and events (composed/customEvent) to bubble selections. Demo uses plain vanilla JavaScript (no build system), shows observedAttributes, property setters/getters, and fixes for open vs closed shadow roots; the component ends up working after small runtime fixes — good if you want practical how‑to.
AI-written summary · about
chapters (20)
- 0:00Introduction to web components
- 1:43Native vs framework components
- 3:40Use cases for web components
- 4:53Web component specifications
- 6:12Project demo overview
- 7:01Creating a custom element
- 9:05Shadow DOM encapsulation
- 10:22Styling the component
- 11:56Passing data with attributes
- 13:35Using slots for content
- 16:13Building an emoji picker
- 18:09Styling the child component
- 19:21Adding interactivity
- 22:17Component communication
- 25:45Managing internal state
- 27:03Simulating API calls
- 29:31Attribute change handling
- 31:15Creating a property API
- 33:20Component API design
- 34:46Libraries and Q&A
related talks
40mWeb Components: It’s about Time
45mLet's Talk About Web Components
36mThe State of Web Components
51mBuilding web applications with Web Components
44mWeb Components An Introduction to the Future
46mWhat ever happened with Web Components?
32mLet's talk about Web Components
39mWeb components - A whirlwind tour