[Go Make Things] Web Components and FOUC

Thursday, October 31, 2024

🎃 A scary good deal! Join the Lean Web Club today and get 1 month free, plus 30% off for the first three months after that. Click here to join for free now!

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.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Ad/iklan :