Nerdiest Political Manifesto
    Wondering what’s next for npm?Check out our public roadmap! »

    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

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    29.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar