We at Microsft used this to build apps.microsoft.com. We're quite happy with the results. Shoelace is customizable, accessible, extensible, easy to use.
Shoelace: A library of web components
51–60 of 114 posts
Re: Shoelace: A library of web components
#52These all look the same. Are there any designers out there who do not follow the "current thing" and can actually think for themselves? I want an opinionated component system which do not look like the others.
For what it’s worth all the components expose CSS parts that let you customize each component in detail.
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?
Re: Shoelace: A library of web components
#53We at Microsft used this to build apps.microsoft.com. We're quite happy with the results. Shoelace is customizable, accessible, extensible, easy to use.
Nice, that sounds like a good product! I will have a look. Thanks.
Re: Shoelace: A library of web components
#54I'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?
Sounds like you might like the idea coined as "HTML Web Components": https://blog.jim-nielsen.com/2023/html-web-components/ You basically write all the normal HTML and CSS so it's loaded in right away. But then you also make use of the advantages that defining a custom element gives you.
How do we write this? I googled some tutorial and it seems it is still JS under the hood
Re: Shoelace: A library of web components
#55I'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?
Give me declarative adopted stylesheets!
Re: Shoelace: A library of web components
#56Earlier 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...
It’s extremely common to support the two most recent major versions, especially for iOS. It’s great if things work on iOS 14, but it’s been explicitly out of support for over a year in a vast number of organisations.
Re: Shoelace: A library of web components
#57I'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?
I did. I can't accept that as a user, so I'm not going to make my users put up with it. The simplest "fade" solution or adding a loading dialog is a huge pain and I'd rather write vanilla html/css/js if it will allow me to avoid that.
Re: Shoelace: A library of web components
#58I'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?
Sounds like you might like the idea coined as "HTML Web Components": https://blog.jim-nielsen.com/2023/html-web-components/ You basically write all the normal HTML and CSS so it's loaded in right away. But then you also make use of the advantages that defining a custom element gives you.
That's a nice workaround but still just a bandaid in my opinion. Instead of a "flash of undefined component" you get a flash of whatever the vanilla html is before your web component was loaded. Now you have to adjust the vanilla html to look as close to your web component as possible, at which point you may just want to use vanilla html and css altogether and ditch the web component.
Re: Shoelace: A library of web components
#59this seems like a great library, but it is missing a date picker. it’s hard to find UI libraries willing to take on the date picker, i guess because native pickers, esp on mobile, get the job done?
Re: Shoelace: A library of web components
#60These all look the same. Are there any designers out there who do not follow the "current thing" and can actually think for themselves? I want an opinionated component system which do not look like the others.
Serious question: if you're building an application, why do you want this? It used to be a huge thing to build Apple, Windows, Motif, whatever apps closely in accordance with their interface guidelines and idioms, but for some reason on the web everyone seems to need an idiosyncratic, opinionated set of basic controls.
I agree with you and I am sure I am not saying anything new, but the fact that on the web content, presentation and marketing sites heavily outnumber webapps, and that one needed to stand out - even if superficially - from countless other options, caused a much larger emphasis being put on customizability, looks and originality which didn't stop at layouts colors and typography, but seeped into interactions. So a lot of jobs got created, lots of users suffered from slow, confusing and buggy UI/UX but at least lots of originality and prettiness was had :)