[SigmundurM]

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.

[yellow_lead]

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.

[hanniabu]

Use a loading overlay that will show for 0.25 seconds if you're that concerned about this

[yellow_lead]

User delays of 100-300 ms is perceptible to the user. This is the exact issue we want to avoid.

[hanniabu]

And in that delay they'll see a loading screen

[corny]

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

[SigmundurM]

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!

[charlieyu1]

How do we write this? I googled some tutorial and it seems it is still JS under the hood

[peebeebee]

It's basically just web components without the ShadowDOM implementation. I do it in some projects, but it comes with other drawbacks too.

[Inviz]

Yeah like no slots.

[peebeebee]

Nested components are not playing nice with their lifecycles too.

Querying elements also becomes more complex.

[drittich]

That article makes a helpful distinction, thanks!