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

41–50 of 114 posts

Re: Shoelace: A library of web components

#41

Post by corny »

SigmundurM wrote: post #37
corny wrote: 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?

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.

Yes, this technique sounds really good. Thanks for this.

Re: Shoelace: A library of web components

#42

Post by xk_id »

taf2 wrote: post #32
xk_id wrote: post #22

Earlier quoted context omitted.

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…

The issue here is the version of the webkit engine, which ships with iOS and that is 3 years old. Anyway a docs page is basic, it should be compatible regardless.

Re: Shoelace: A library of web components

#43

Post by drittich »

SigmundurM wrote: post #37
corny wrote: 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?

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 article makes a helpful distinction, thanks!

Re: Shoelace: A library of web components

#44

Post by Bytewave81 »

neeleshs wrote: post #25
Bytewave81 wrote: post #21

Earlier quoted context omitted.

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?

We settled on Chakra (https://chakra-ui.com/). Although we also abandoned our ambitions of a Next.js migration, so... I guess it didn't really end up mattering all that much anyway.

Re: Shoelace: A library of web components

#45

Post by chrismorgan »

Onavo wrote: post #23
corny wrote: 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?

Web Components in general: sure. But what Shoelace uses: no.

Specifically, Shoelace uses Shadow DOM and adoptedStyleSheets.

For Shadow DOM, there’s Declarative Shadow DOM, a way of serialising a Shadow DOM, which is extra work to support, but possible; it’s currently supported in Chromium and Safari, and last month Firefox landed an experimental implementation.

But the key feature and problem of Shadow DOM (in my opinion, more problem than feature) is how it isolates styles. You need to add the stylesheet to every shadow root, via a or element (and hope the browser is clever enough to deduplicate, which it should be in the latter case but I don’t think it will be in the former), or via adoptedStyleSheets, which is generally more efficient and allows shared mutation after construction (unlike the other approaches). Shoelace uses adoptedStyleSheets. Trouble is, that doesn’t work with Declarative Shadow DOM.

Re: Shoelace: A library of web components

#47

Post by Inviz »

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?

Re: Shoelace: A library of web components

#48

Post by neeleshs »

Bytewave81 wrote: post #44
neeleshs wrote: post #25

Earlier quoted context omitted.

What did you end up using?

We settled on Chakra ( https://chakra-ui.com/ ). Although we also abandoned our ambitions of a Next.js migration, so... I guess it didn't really end up mattering all that much anyway.

Thank you

Re: Shoelace: A library of web components

#49

Post by megaman821 »

Valord wrote: post #46
xydac wrote: post #14

have been following the development of this very closely for this library, and love the fact that we can script load individual web component in html as bare bones.

Can you please elaborate on what this means ?

Add the script tag to your page for any of the components and you can use them. No building, compiling or initializing anything.
Post reply on HN