FOUCE — Flash of Undefined Custom Elements

Cory LaViska:

Web components are defined and registered with JavaScript. Depending on how and when you load the scripts that perform registration, you may see a brief flash of unstyled HTML where your custom elements should be when the page loads. This is not dissimilar to FOUC, which occurs when HTML is displayed before the stylesheet has loaded.

Cory mentions two workarounds. One using the :defined pseudo-class, and one using JavaScript.

While the approaches do prevent the FOUCE, they don’t cover the “no-JS available” scenario. Would be nice if browsers fixed this automatically by not rendering anything for a little while, to give the scripts the time to load and execute — comparable to how font-display can let you tweak this for webfonts. When the loading fails, browsers should fall back to the original content.

FOUCE — Flash of Undefined Custom Elements →

💡 If we had Self-contained Components, that could potentially fix things too, no?

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.