Hacker News Reader

Comment by spinningslate | Hacker News Reader

this looks great. I'm puzzled by something though: why does it duplicate components that already exist in standard HTML5 (Button, Checkbox, Dropdown etc.)? The whole idea of web components is being able to augment what's already built in, not have to replace it.

Maybe it's for consistency (styling/behaviour). Either way, it looks really well done.

View on HN

It doesn't duplicate, it wraps. `sl-checkbox` is ultimately a `input type="checkbox"`, but wrapped in containers and exporting uniform props. For example `sl-checkbox` is a container with both a checkbox and a label container in it. And it exports a prop `size` which takes the values "small", "medium", "large", which is uniformly provided across Shoelace input components.

It's a combo of (a) HTML lacks the features/ergonomics and (b) need to provide a clean-syntax API that extends HTML.

The only reason we have 10,000 UI libraries in the last 20 years is because we decided to keep default browser UI ugly and bare-bones for some reason.

That's a good thing in my opinion. Don't give me a set of 25 controls, instead make it easy to make my own. Because no matter what you include in default controls, I am going to need 12 more.

But the default set has been lacking for too long now too. Webbrowsers should really get together and make a new default set of Application-based UI controls, and make them a bit more beautiful by default. :)

Like datatables, rich-text editing, toolbars,...

MOST applications are just simpler CRUD UIs. Developing these is still too complex on the web platform.

Or: we as users can wish for the days of 90's web design and bring it back! The main content was so much more up front. Forms, buttons, and general layout were all the same.

And Progressive Enhancement has it that our bells and whistles gracefully degrade back to from whence they came.

> instead make it easy to make my own.

But browsers don't do that either. And you really, really don't want to make your own controls most of the time. Because: https://drewdevault.com/2021/06/27/You-cant-capture-the-nuan...

I think it's also because every site wants their buttons etc. to look slightly different to every other site's, because branding. Being able to stand out from the crowd is a feature.

Personally, I wish that for accessibility and other reasons, all 10000 frameworks would produce buttons with some kind of metadata that lets a user configure their own settings. But we're quite far off that.

Because browsers offer very little styling and customization options even for the handful of built-in elements. That's why every library under the sun tries to re-invent them again, and again, and again.

https://open-ui.org/ will finally help with this, but it's a very slow process.

Theming is at least one reason.

One can extend native elements, but the support ain’t there on Safari

Just this tiny polyfill, and you should be OK on Safari. https://github.com/ungap/custom-elements

I recently made an entire WebRTC p2p video player that worked seamlessly everywhere! Except iPhone Safari. And all iPhone (but not iPad!) browsers are Safari under the hood that couldn't do a few of the fundamentals needed.

Reply on news.ycombinator.com