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>