Web Components: It’s about Time

on YouTube ↗40m

" summary

Builds a working social-post web component (no build system, just vanilla JS) that includes an emoji picker child component, uses custom elements and shadow DOM with slots and CSS custom properties, and demonstrates attribute lifecycle, property setters/getters, dispatching composed custom events, and observedAttributes. Live coding shows data loaded after a timeout, bubbling vs composed behavior, and that polyfills cover most browsers except IE11; mentions tooling options like lit-html lit-element stencil polymer and angular elements.

AI-written summary · about

" chapters (20)

1. 0:00Introduction to web components
2. 1:43Native vs framework components
3. 3:40Use cases for web components
4. 4:53Web component specifications
5. 6:12Project demo overview
6. 7:01Creating a custom element
7. 9:05Shadow DOM encapsulation
8. 10:22Styling the component
9. 11:56Passing data with attributes
10. 13:35Using slots for content
11. 16:13Building an emoji picker
12. 18:09Styling the child component
13. 19:21Adding interactivity
14. 22:17Component communication
15. 25:45Managing internal state
16. 27:03Simulating API calls
17. 29:31Attribute change handling
18. 31:15Creating a property API
19. 33:20Component API design
20. 34:46Libraries and Q&A

" related talks

• 40mWeb Components: It’s about TimeErin Zimmer · iJS London 2019
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 46mWhat ever happened with Web Components?Dwane Hemmings · Øredev 2023
• 36mThe State of Web ComponentsAna Cidre · CityJS Conference 2020
• 59m2018 - The Year of Web ComponentsDominik Kundel · NDC Oslo 2018
• 45mLet's Talk About Web ComponentsJemima Abu · NDC Porto 2022
• 21mThe Year of Web ComponentsDominik Kundel · jsPoland 2018
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014