Web Component FOIC (Flash of Invisible Content)!?!

🔗 Links

⏳ Timestamps
00:00 - Intro
00:51 - The Web Component
02:29 - Approach 1: Progressive Enhancement
07:51 - Approach 2: Placeholder Content
14:40 - Wrapping Up

[kevbonett]

Another great video, Chris!

I always opt for the progressive enhancement approach. I author my web components as HTML web components that contain the "fallback" HTML.

[davidluhr]

One approach I take for placeholder content in loading states is to duplicate the final markup but set aria-hidden="true" and visibility: hidden. It will occupy the same layout as the final content without magic numbers and is more future proof as styles evolve. The tradeoff is more markup to manage.

[FabricioEspinozaMora]

Very interesting approaches, I learned a lot as always from your videos, I really appreciate your extensive knowledge.

One very interesting thing I found in my research is the Declarative Shadow DOM, it allows you to include html inside the Custom Element (as you mentioned at 6:40), but initializing a Shadow Root without the need for Javascript!, and thus get the benefit of style encapsulation and optimization benefits when using <link rel="stylesheet"/>.

I want to thank you for answering my question in such a complete way, it really helps me understand different perspectives about the problem.

I also want to tell you that I really like the approach of your channel showing that you can do really cool things with vanilla Javascript, which is very different than most content creators, because of the frameworks that I think sometimes overcomplicate things.

Keep going!