This content originally appeared on Go Make Things and was authored by Go Make Things
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.
🎃 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!
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-10-30T14:30:00+00:00) Web Components and FOUC. Retrieved from https://www.scien.cx/2024/10/30/web-components-and-fouc/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.