If you want to create a button from scratch, you must first create the universe

239 points · 124 comments on HN · read original →

Points and comments are a snapshot, not live.

Recreating a native HTML button from scratch requires implementing dozens of behaviors.

The article uses the example of a custom `<sagan-button>` to show that recreating a native `<button>` requires implementing role, accessible label, focusability, mouse/touch/keyboard activation, disabled state, and form-related attributes including type, form association, and validation API. The author argues this is a Sisyphean task and advises using native HTML elements instead of custom components, noting that a button must support 12 requirements including WCAG SC 4.1.2, 1.3.1, 2.4.3, 2.4.7, 2.1.1, and 3.3.1.

The article walks through adding each feature step by step, from ARIA roles and tabindex to keyboard event handling, shadow DOM, and a reactive attribute pattern for disabled state and form participation.

What commenters are saying

Commenters largely agree with the article's premise, noting that many websites recreate components poorly. Several point out that the real problem is missing native elements like comboboxes with server-side filtering, where custom implementation is unavoidable. A thread debates why native HTML widgets have seen little progress for decades, with one commenter blaming browser fragmentation and another suggesting HTML was designed for documents, not applications. Some commenters mention `<datalist>` as an existing but incomplete combobox alternative. A few argue that AI now makes custom implementation cheaper, though others push back that AI still makes the same mistakes humans do.