npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

with-custom-elements-defouc

1.0.6 • Public • Published

with-custom-elements-defouc

Travis npm package Coveralls

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>

install

npm i with-custom-elements-defouc

Downloadsweekly downloads

2

version

1.0.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability