Designing Component API
summary
Compares concrete patterns from browser standards and shows what actually works: the select/option pattern demonstrates a compact declarative API that handles keyboard, accessibility and cross‑browser quirks; a homegrown bar‑chart that bundles all configuration inside the component breaks and is hard to change, so build components as single‑responsibility units. Expose state via attributes properties events, keep initialization minimal and avoid large runtime deps so the component loads fast, and test interaction on keyboard and mobile to ensure it actually works.
AI-written summary · about
chapters (10)
- 0:00Component design challenges
- 1:46Web components evolution
- 5:27HTML elements limitations
- 9:13Focus principle
- 12:14Component consistency
- 15:04State management
- 17:38Event handling
- 19:53Browser support trade-offs
- 22:09Component development kits
- 23:55Q&A
related talks
44mWriting good components
26mComponents, Patterns and sh*t it’s Hard to Deal with
43mDIY Components: Why and how?
34mAdvanced React Component Patterns
10mCrafting Accessible Components for Component Libraries
49mBuilding Better Components - A Journey to a More Resilient Frontend
23mA Philosophy for Designing Components with Composition
26mComponents, Patterns and Other Not-So-Simple Things to Manage