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?