Live data from Hacker News

Shoelace: A library of web components

shoelace.style

21–30 of 114 posts

Re: Shoelace: A library of web components

#21
post #17

I didn't like that the components are all web components with their own shadow Dom inside. Makes styling really hard and didn't work with tailwind for example.

Not just that, but it basically makes the library incompatible with serverside rendering a la Next.js. We actually explored using Shoelace for a project but ended up having to choose something else instead because of this.

Re: Shoelace: A library of web components

#22
post #13

Earlier quoted context omitted.

That’s before Safari added better web component support. I would expect many sites and apps to not work at this point.

14.3 seems more like "try to degrade gracefully" old rather than "won't support" old...

Whatever it requires to hide the menu, that a 3 years old browser doesn’t have, can’t possibly be essential for just a documentation page.

Re: Shoelace: A library of web components

#24

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

Re: Shoelace: A library of web components

#25
post #17

I didn't like that the components are all web components with their own shadow Dom inside. Makes styling really hard and didn't work with tailwind for example.

Not just that, but it basically makes the library incompatible with serverside rendering a la Next.js. We actually explored using Shoelace for a project but ended up having to choose something else instead because of this.

What did you end up using?

Re: Shoelace: A library of web components

#26

I've used these in the past and they are really well done. Also the developer now works at Microsoft and they are using it so at least it has a major backer.

Cory (the creator) actually works at FontAwesome now. FontAwesome purchased the library ~1yr ago and hired Cory to work on the library full time as well.

https://blog.fontawesome.com/shoelace-joins-font-awesome/

Re: Shoelace: A library of web components

#27
post #12

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.

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.

Re: Shoelace: A library of web components

#28
post #16

I'm not happy with any of the solutions to prevent a flash of undefined components. Has anyone given up on web components for that reason? Or is there a best practice for this?

the doc site doesn't have this problem because it doesn't make a giant single archive of code that loads slowly on a single core. lighthouse doesn't even record the flash. most of the pages are getting 98/99 performance scores.

i'm sure if you webpack the crap out of it bundling hundreds of dependencies into the same parse, it'll perform poorly, but well, stop doing that.

Re: Shoelace: A library of web components

#29
post #28
post #16

I'm not happy with any of the solutions to prevent a flash of undefined components. Has anyone given up on web components for that reason? Or is there a best practice for this?

the doc site doesn't have this problem because it doesn't make a giant single archive of code that loads slowly on a single core. lighthouse doesn't even record the flash. most of the pages are getting 98/99 performance scores. i'm sure if you webpack the crap out of it bundling hundreds of dependencies into the same parse, it'll perform poorly, but well, stop doing that.

It definitely does have this problem, on Firefox at least. Refreshing the page has a lot of layout shift as buttons render.

Re: Shoelace: A library of web components

#30
post #23
post #16

I'm not happy with any of the solutions to prevent a flash of undefined components. Has anyone given up on web components for that reason? Or is there a best practice for this?

Do webcomponents not have build time pre-rendering or SSR?

Certainly can just depends on the framework used. I know 11ty can server render them. Astro.build supports lit as well.
Post reply on HN