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?
[deleted]
Shoelace: A library of web components
31–40 of 114 posts
Re: Shoelace: A library of web components
#32Earlier quoted context omitted.
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.
It’s an 8 year old phone … iPhone 6s was released September 2015…
Re: Shoelace: A library of web components
#33this 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.
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.
Re: Shoelace: A library of web components
#34These 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.
Re: Shoelace: A library of web components
#35These 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.
Re: Shoelace: A library of web components
#36I 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.
I guess the advantage is that you can drop them into any HTML page and they look and work correctly. And you can control them with plain JS, like `document.getElementByID(dialogId).open = false;`
Re: Shoelace: A library of web components
#37I'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.
Re: Shoelace: A library of web components
#38These 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.
Re: Shoelace: A library of web components
#39I'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?
No, I believe it is the nature of web components that they can't be server rendered. I'm not talking about framework components like react, vue, etc.
Re: Shoelace: A library of web components
#40I 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.
I guess the advantage is that you can drop them into any HTML page and they look and work correctly. And you can control them with plain JS, like `document.getElementByID(dialogId).open = false;`
Probably, from my perspective (using a frontend framework) this doesn't sound too helpful though.