One Component a Day Keeps the Doctor Away

on YouTube ↗24m

" summary

Shows a single-file component workflow using Web Components (custom elements and the Shadow DOM) and demonstrates a music player that fetches and caches album art, uses templates, lazy-loads images, and handles lifecycle and attribute changes. Explains practical pitfalls around scoping, element registration, and cross-frame access, and points to code on GitHub (OneComponentADay) plus slides with a live demo of components rendering and updating album covers.

AI-written summary · about

" chapters (16)

1. 0:00Introduction
2. 1:10Album art challenge
3. 2:39Download function
4. 4:23Yarn framework
5. 5:28Template basics
6. 7:15Custom elements & shadow DOM
7. 10:50Life cycle callbacks
8. 11:34Shadow DOM isolation
9. 13:22Styling in shadow DOM
10. 14:24Browser support
11. 16:16Reusable components
12. 17:21Component libraries
13. 18:48Modern development
14. 20:11Practical examples
15. 21:16Live demo
16. 22:26Q&A

" related talks

• 29mWhen to Use Web ComponentsTim van der Lippe · Frontend Developer Love 2018
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014
• 45mLet's Talk About Web ComponentsJemima Abu · NDC Porto 2022
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 28mThe (Real) State of Web ComponentsMartin Hochel · revo.js 2019
• 37mThe world of Web ComponentsNishu Goel · AzConf 2020
• 39m50 Shades of Web ComponentsAleksey Nazarenko · Я люблю Фронтенд 2026
• 41mComponents Approach to Building Web AppsVinci Rufus · Meta Refresh 2015