3 ms·

this looks great. I'm puzzled by something though: why does it duplicate components that already exist in standard HTML5 (Button, Checkbox, Dropdown etc.)? Th

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.

threatofrain 3y ago
Theming is at least one reason.
troupo 3y ago
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/ https://open-ui.org/ will finally help with this, but it's a very slow process.
lxe 3y ago
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.
- breadwinner 3y ago
  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.
  - peebeebee 3y ago
    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.
    - andirk 3y ago
      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.
  - troupo 3y ago
    > 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-nuance.html https://drewdevault.com/2021/06/27/You-cant-capture-the-nuan...
- red_admiral 3y ago
  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.
lelandfe 3y ago
One can extend native elements, but the support ain’t there on Safari
- yuretz 3y ago
  Just this tiny polyfill, and you should be OK on Safari. https://github.com/ungap/custom-elements https://github.com/ungap/custom-elements
- andirk 3y ago
  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.
mondrian 3y ago
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.

threatofrain 3y ago

Theming is at least one reason.

troupo 3y ago

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/ https://open-ui.org/ will finally help with this, but it's a very slow process.

lxe 3y ago

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.

breadwinner 3y ago
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.
- peebeebee 3y ago
  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.
  - andirk 3y ago
    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.
- troupo 3y ago
  > 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-nuance.html https://drewdevault.com/2021/06/27/You-cant-capture-the-nuan...
red_admiral 3y ago
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.

lelandfe 3y ago

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

yuretz 3y ago
Just this tiny polyfill, and you should be OK on Safari. https://github.com/ungap/custom-elements https://github.com/ungap/custom-elements
andirk 3y ago
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.

mondrian 3y ago

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.