3 ms·

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/ht

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.
    - peebeebee 3y ago
      Nested components are not playing nice with their lifecycles too. Querying elements also becomes more complex.
yellow_lead 3y ago
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 3y ago
  Use a loading overlay that will show for 0.25 seconds if you're that concerned about this
  - yellow_lead 3y ago
    User delays of 100-300 ms is perceptible to the user. This is the exact issue we want to avoid.
    - hanniabu 3y ago
      And in that delay they'll see a loading screen

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.
  - peebeebee 3y ago
    Nested components are not playing nice with their lifecycles too. Querying elements also becomes more complex.

yellow_lead 3y ago

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 3y ago
Use a loading overlay that will show for 0.25 seconds if you're that concerned about this
- yellow_lead 3y ago
  User delays of 100-300 ms is perceptible to the user. This is the exact issue we want to avoid.
  - hanniabu 3y ago
    And in that delay they'll see a loading screen