Web Components: Designing Frontends for Reusability

on YouTube ↗43m

" summary

Repeatedly rebuilding the same filterable sortable table across four projects drives creation of a reusable "Bella" component that starts with HTML-first components (inputs and radios mapped to query params), adds accessibility with aria-label / aria-labelledby and role=group, uses minimal CSS classes plus CSS Grid for layout, and avoids JS until needed. When needed it uses a custom element with custom element connectedCallback, debounced keyup and fetch to replace tbody via fetch to remove flicker and keep history.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 11:47Filter Field Component
3. 19:00Sort Button Component
4. 28:02Table Header Component
5. 37:40Tabelle

" related talks

• 41mWeb Components: Maintaining and Reusing your FrontendJoy Heron · Agile on the Beach 2019
• 39mWeb components - A whirlwind tourMartin Naumann · Jazoon TechDays Spring 2016 Bern
• 49mBuilding Better Components - A Journey to a More Resilient FrontendDaniel Yuschick · NDC Copenhagen 2026
• 51mBuilding Better Components — A Journey to a More Resilient FrontendDaniel Yuschick · NDC Oslo 2025
• 24mDesigning Components for Fun, Profit and SanityYishu See · JSConf.Asia 2019
• 44mThe Future is in PiecesJonathan Snook · Web Unleashed 2015
• 28mBuilding reusable UI components in VuePlamen Zdravkov · Vue.js Amsterdam 2018
• 56mThe Web, Its Frameworks and Its Standards: Deconstruct to (Re?)ConstructHubert Sablonnière · DevFest Lille 2019