This content originally appeared on Bram.us and was authored by Bramus!
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?
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-12-30T11:03:16+00:00) FOUCE — Flash of Undefined Custom Elements. Retrieved from https://www.scien.cx/2021/12/30/fouce-flash-of-undefined-custom-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.