with-custom-elements-defouc
Mitigate intrinsic Flash of Unstyled Content (FOUC) of Custom Elements V1, by delaying their visibility upon connection.
Install
Add Custom Elements de-FOUC higher-order-class to your Custom Elements:
npm i with-custom-elements-defouc
IMPORTANT: don't forget to use posthtml-custom-elements-defouc plugin at your server.
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
}Usage
This higher-order-class comes with sane defaults, just compose your Custom Elements with this:
import withCustomElementsDeFouc from 'with-custom-elements-defouc'
class CustomElement extends HTMLElement {
// you code here
}
export default withCustomElementsDeFouc(CustomElement/*, { options } */)Options
Custom style
Remove inline style either by type string or a style hash - truthy hash values will be used as replacement.
String:
import withCustomElementsDeFouc from 'with-custom-elements-defouc'
class CustomElement extends HTMLElement {
// you code here
}
export default withCustomElementsDeFouc(CustomElement, {
style: 'visibility'
})Style Hash:
import withCustomElementsDeFouc from 'with-custom-elements-defouc'
class CustomElement extends HTMLElement {
// you code here
}
export default withCustomElementsDeFouc(CustomElement, {
style: {
visibility: null, // falsy will be removed
display: 'block' // truthy will be replaced/added
}
})Custom className
Any CSS className to be removed.
import withCustomElementsDeFouc from 'with-custom-elements-defouc'
class CustomElement extends HTMLElement {
// you code here
}
export default withCustomElementsDeFouc(CustomElement, {
className: 'foo'
})License MIT
Proudly brought to you by <scale-unlimited>