6 ms·

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 pr

by corny 3y ago

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?

Onavo 3y ago
Do webcomponents not have build time pre-rendering or SSR?
- toddmorey 3y ago
  Certainly can just depends on the framework used. I know 11ty can server render them. Astro.build supports lit as well.
- deleted 3y ago
  [deleted]
- corny 3y ago
  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.
- chrismorgan 3y ago
  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 <style> or <link rel=stylesheet> 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.
raggi 3y ago
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.
- MaxLeiter 3y ago
  It definitely does have this problem, on Firefox at least. Refreshing the page has a lot of layout shift as buttons render.
SigmundurM 3y ago
Sounds like you might like the idea coined as "HTML Web Components": https://blog.jim-nielsen.com/2023/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.
- corny 3y ago
  Yes, this technique sounds really good. Thanks for this.
  - SigmundurM 3y ago
    You're welcome! I've started moving to this technique from my earlier technique of putting a data-module on wrapping div components, where I manually had to deal with a bunch of stuff which HTML Web Components just do for you for free. Super handy!
- drittich 3y ago
  That article makes a helpful distinction, thanks!
- charlieyu1 3y ago
  How do we write this? I googled some tutorial and it seems it is still JS under the hood
  - peebeebee 3y ago
    It's basically just web components without the ShadowDOM implementation. I do it in some projects, but it comes with other drawbacks too.
    - Inviz 3y ago
      Yeah like no slots.
math_dandy 3y ago
Give me declarative adopted stylesheets!
yellow_lead 3y ago
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.
microflash 3y ago
I usually hide the web components until they are defined using `:not(:defined)` CSS selector
- joshspankit 3y ago
  That causes CLS which is also an issue
  - microflash 3y ago
    My apologies. By 'hide', I meant hide visually (through `opacity: 0`) that keeps the space reserved to avoid CLS.
    - yencabulator 3y ago
      Do I understand correctly, this only works when the size of the component is determined from "above" in the layout tree? That sounds not generally useful...
angra_mainyu 3y ago
This is a solved problem. You tackle it by doing two things: 1) use a bundler (rollup or webpack) if your code is big so it can be chunked and loaded quickly 2) have a loading spinner by default Some developers have a dogmatic zeal against loading spinners, but users are very accustomed to them. In fact, it's possible for websites to load _too_ fast, seeming unnatural to users (who at this point in time are very much expecting the flow to be request->spinner->load).

by corny 3y ago

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?

Onavo 3y ago

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

toddmorey 3y ago
Certainly can just depends on the framework used. I know 11ty can server render them. Astro.build supports lit as well.
deleted 3y ago
[deleted]
corny 3y ago
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.
chrismorgan 3y ago
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 <style> or <link rel=stylesheet> 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.

raggi 3y ago

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.

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

SigmundurM 3y ago

Sounds like you might like the idea coined as "HTML Web Components": https://blog.jim-nielsen.com/2023/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.

corny 3y ago
Yes, this technique sounds really good. Thanks for this.
- SigmundurM 3y ago
  You're welcome! I've started moving to this technique from my earlier technique of putting a data-module on wrapping div components, where I manually had to deal with a bunch of stuff which HTML Web Components just do for you for free. Super handy!
drittich 3y ago
That article makes a helpful distinction, thanks!
charlieyu1 3y ago
How do we write this? I googled some tutorial and it seems it is still JS under the hood
- peebeebee 3y ago
  It's basically just web components without the ShadowDOM implementation. I do it in some projects, but it comes with other drawbacks too.
  - Inviz 3y ago
    Yeah like no slots.

math_dandy 3y ago

Give me declarative adopted stylesheets!

yellow_lead 3y ago

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.

microflash 3y ago

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

joshspankit 3y ago
That causes CLS which is also an issue
- microflash 3y ago
  My apologies. By 'hide', I meant hide visually (through `opacity: 0`) that keeps the space reserved to avoid CLS.
  - yencabulator 3y ago
    Do I understand correctly, this only works when the size of the component is determined from "above" in the layout tree? That sounds not generally useful...

angra_mainyu 3y ago

This is a solved problem. You tackle it by doing two things: 1) use a bundler (rollup or webpack) if your code is big so it can be chunked and loaded quickly 2) have a loading spinner by default Some developers have a dogmatic zeal against loading spinners, but users are very accustomed to them. In fact, it's possible for websites to load _too_ fast, seeming unnatural to users (who at this point in time are very much expecting the flow to be request->spinner->load).