Web Components and FOUC
My preferred style of authoring Web Components is to start with existing HTML and enhance it once the Web Component loads.
For example, if I were building a show/hide component, I might start with a <button> and some content that it controls.
I’d also use the [hidden] attribute to hide the button from the UI.
<show-hide>
<button trigger hidden>Show More</button>
<p content>Now you see me. Now you don't!</p>
</show-hide>Note: this is for teaching purposes only. Don’t email me about <details> and <summary>. I know they exist, and use them often.
When the Web Component loads and the JavaScript initializes, I’d remove the [hidden] attribute from the <button>, add the required [aria-expanded] attribute, and add a [hidden] attribute on the content.
<show-hide>
<button trigger aria-expanded="false">Show More</button>
<p content hidden>Now you see me. Now you don't!</p>
</show-hide>When I talk about building Web Components this way, I often get emails asking me about FOUC, the Flash of Unstyled Content that happens when the HTML is ready but the JS hasn’t loaded yet.
The <button> is hidden and the content is visible, and then the JavaScript loads and the opposite is true.
Isn’t that bad for user experience?!
I don’t think so.
At the least, it’s better for user experience that the JS failing and the user not being able to access anything at all.
FOUC is a side-effect of progressive enhancement. It means that user is getting something usable. To me, that’s a more than worthwhile tradeoff when the alternative is they get something completely unusable until the JavaScript is ready.