Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Shoelace: A library of web components

shoelace.style

Post reply on HN
Print view View original

81–90 of 114 posts

Re: Shoelace: A library of web components

#81

Post by andirk »

peebeebee wrote: post #71
breadwinner wrote: post #27

Earlier quoted context omitted.

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.

Re: Shoelace: A library of web components

#82

Post by phist_mcgee »

yolo3000 wrote: post #80

Haven't done frontend in a long time, but how is this different than something like Bootstrap? Is it the fact that it comes also as a React & co library and you can customize properties of a 'component' easier than building your own wrapper 'component' to modify properties which are set via 'data' or 'css' attributes? I guess this leads me to the next question, I saw in a recent project on my company's Github how eve…

https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

Re: Shoelace: A library of web components

#83

Post by andirk »

lelandfe wrote: post #24
spinningslate wrote: post #7

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.

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

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.

Re: Shoelace: A library of web components

#84

Post by rahoulb »

yolo3000 wrote: post #80

Haven't done frontend in a long time, but how is this different than something like Bootstrap? Is it the fact that it comes also as a React & co library and you can customize properties of a 'component' easier than building your own wrapper 'component' to modify properties which are set via 'data' or 'css' attributes? I guess this leads me to the next question, I saw in a recent project on my company's Github how eve…

Like bootstrap it's a set of standard behaviours and styles.

Bootstrap basically takes standard elements and when you add CSS classes and data properties, it styles them and adds some JS behaviours.

Shoelace builds HTML custom elements, using CSS variables for controlling the style, with the JS baked into the custom-element code. And Shoelace uses the shadow DOM, so any customisations do not "leak" outside of your components (although this has its own implications).

Custom elements basically do the same as React/Vue/whatever (reactive properties, slots etc) but in a manner that's built into the HTML spec and into all browsers. (React/Vue et al also have mechanisms for building your components as custom-elements, but you're then adding the dependency on React/Vue when you reuse them - although Shoelace has a dependency on lit.dev, as the actual custom-elements spec is quite low-level).

But Bootstrap and Shoelace are essentially solving the same problem - a reusable design system - but Shoelace does it in a way that's already built in to browsers and arguably cleaner to use.

Re: Shoelace: A library of web components

#85

Post by nona »

Inviz wrote: post #47

I'm looking for a library of web components that: 1) Uses slots for composition 2) Does not use CSS-in-JS 3) Lightweight I understand that slots imply shadow Dom, and then shadow Dom usually means adding/adopting stylesheets into components, and that means css in js. But there's also ::part that allows piercing the shadow dom. Is there any library that uses it?

I think this library does what you want: https://shoelace.style/getting-started/customizing#css-parts

Re: Shoelace: A library of web components

#86

Post by red_admiral »

lxe wrote: post #12
spinningslate wrote: post #7

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.

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.

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.

Re: Shoelace: A library of web components

#87

Post by [deleted] »

mondrian wrote: post #64
Inviz wrote: post #52

Earlier quoted context omitted.

I don't see that these components use part/exportparts feature to do that. Am I looking at it the wrong way? Or do you mean that customization happens via CSS?

Yeah, sorry, it's using CSS parts for customization. So if a component is made up of multiple nested containers, you can target the inner containers with ::part(name).

[deleted]

Re: Shoelace: A library of web components

#88

Post by Inviz »

nona wrote: post #85
Inviz wrote: post #47

I'm looking for a library of web components that: 1) Uses slots for composition 2) Does not use CSS-in-JS 3) Lightweight I understand that slots imply shadow Dom, and then shadow Dom usually means adding/adopting stylesheets into components, and that means css in js. But there's also ::part that allows piercing the shadow dom. Is there any library that uses it?

I think this library does what you want: https://shoelace.style/getting-started/customizing#css-parts

I guess it’s most-but-not-all part that got me confused. The are parts re-exported Manually? I guess that works

Re: Shoelace: A library of web components

#89

Post by Inviz »

mattlondon wrote: post #63
Inviz wrote: post #47

I'm looking for a library of web components that: 1) Uses slots for composition 2) Does not use CSS-in-JS 3) Lightweight I understand that slots imply shadow Dom, and then shadow Dom usually means adding/adopting stylesheets into components, and that means css in js. But there's also ::part that allows piercing the shadow dom. Is there any library that uses it?

The CSS doesn't need to be in the JS. You can trivially just fetch the static CSS file in JS then have the content adopted.

Yeah but flash of unstyled content? Plus you need to somehow adopt only related parts? Selectors wouldnt match easily necessarily, e.g. decision to adopt :hover selector must be made somehow

Re: Shoelace: A library of web components

#90

Post by microflash »

joshspankit wrote: post #77
microflash wrote: post #67

Earlier quoted context omitted.

I usually hide the web components until they are defined using `:not(:defined)` CSS selector

That causes CLS which is also an issue

My apologies. By 'hide', I meant hide visually (through `opacity: 0`) that keeps the space reserved to avoid CLS.
Post reply on HN