Mitigate intrinsic Flash of Unstyled Content (FOUC) of Custom Elements V1, by delaying their visibility upon connection.
Unfortunately one rather intriguing problem with Custom Elements is performance and it's intrinsic problem of Flash of Unstyled Content (FOUC).
This monorepo is here to help you mitigate this annoying FOUC-issue, by providing you with:
- a PostHTML
posthtml-custom-elements-defoucplugin for your servers - and a higher-order-class
with-custom-elements-defoucto compose your custom elements with
Note: Depending at your targeted audience the CSS :defined pseudo-class may is a better solution.
Of course if you need to support any user with non-capable browsers :defined won't help you there.
You could handle all undefined custom elements FOUC just by these lines defined within your <head> section:
:not(:defined) {
display: none;
// or
visibility: hidden;
// or whatever you came up with
}License MIT
Proudly brought to you by <scale-unlimited>