FOUC in the Wild
This baseline page intentionally shows the flash of unstyled content that can happen when custom elements render before their definitions and styles arrive.
What's the Deal with FOUC?
When you use custom elements, there's a race condition between HTML parsing, JavaScript execution, and style application. Sometimes the browser renders your custom element before it's been defined, resulting in that ugly, fleeting moment of "what is this nonsense on my screen?"
This site explores different strategies to minimize or eliminate FOUC on initial page load. Use the menu to compare approaches side by side.
About This Page
Fair warning: This page does not use FOUC prevention logic. In fact, the component definitions in this demo have been deliberately delayed to emphasize the FOUC in action.
Check the other pages via the navigation menu to see how we can prevent this mess.
Navigation
Use the menu on the left to explore the different approaches:
- With FOUC (current): The baseline problem
- Old CSS Solution: The classic
:not(:defined)visibility trick - JS Solution: Wait for definitions with a timeout fallback
- CSS Solution: Modern CSS timeout with
:has()+@property
The Goal
By the end of this experience, you'll understand why preventing FOUC matters for user experience and have concrete strategies to apply in your own projects. Plus, you'll have a newfound appreciation for the word "rendering."