DIY Components: Why and how?
summary
Claim: the DIY route almost always right for a complex dropdown that native select cannot style or extend. Examples use React and reactor‑boilerplate, cite 21,000 GitHub stars, and contrast component libraries (can accidentally add ~15 MB) with rolling a custom select, modal or multi‑select. Concrete techniques covered: input type=hidden sync for form interoperability, custom elements with is=, reliance on HTML5.2 dialog, keyboard handling, accessibility, testing, and the inevitability of refactors when APIs and edge cases grow.
AI-written summary · about
chapters (34)
- 0:00Introduction
- 2:04Web Components
- 3:20Inputs
- 5:27HTML History
- 7:18Example
- 8:19Modal Dialog
- 10:06Dialog Tag
- 11:34Multiselect
- 13:15Why not
- 15:35How
- 17:05Users
- 19:53Responsible Choice
- 20:52Caveat
- 21:40Manual
- 22:07Feature Complete
- 22:58Accessibility
- 26:02Accessibility tools
- 27:06Summary
- 28:09Word Game
- 28:48Disclaimer
- 29:22Input API
- 31:40Component that tries
- 34:31Component reuse example
- 35:43Interoperability
- 36:05Form example
- 37:04How to fix this
- 37:59Custom Elements
- 38:29Classic Class
- 39:22Drawbacks
- 39:36Gift
- 39:54Flexibility
- 40:09In practice
- 40:39The first way
- 42:44Recap
