Have ideas to improve npm?Join in the discussion! »

    focus-within-polyfill

    5.2.1 • Public • Published

    :focus-within Pseudo-Class Polyfill   ko-fi

    npm version Build Status David David Greenkeeper badge semantic-release Commitizen friendly License: MIT


    Find this usefull? Buy me a coffee!


    The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus (This includes descendants in shadow trees).

    This selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.

    More information on MDN.

    ✏️ How to use

    This package is available both as production ready script and as a package. The script can be downloaded here, or installed with a package manager.

    # npm
    npm install focus-within-polyfill --save
    
    # yarn
    yarn add focus-within-polyfill

    When included the polyfill will auto-initialize.

    /* ES5 */
    <script src='https://unpkg.com/focus-within-polyfill/dist/focus-within-polyfill.js'></script>

    In addition this library is available as a es6 module that can be imported and bundled up with any build tool. If you are importing it as a dependency, make sure to call the polyfill method:

    /* ES6 */
    import 'focus-within-polyfill'

    After import and initialization the polyfill will kick in only if :focus-within is not supported in the current browser. By default the .focus-within class will be added automatically to every element that should have the pseudo-class. Additionally in the initialization fase a .js-focus-within class will be appended to the body.

    📃 How it works

    This package will add two event listeners, one on the focus event and one on the blur event to trigger the automatic apply and remove of a custom attribute to indicate wheter the Element should have a :focus-within pseudo-class. In order to do so and be compatible with older version of IE and EDGE the getAttribute, setAttribute and removeAttribute methods are used to set both attributes and classes. Then requestAnimationFrame is used to apply the modification to the DOM.

    This polyfill is compatible with native Shadow DOM and with the webcomponents polyfill. This means that even on IE11 and EDGE you will be able to use the :focus-within pseudo-class to style elements even outside a shadowRoot.

    Features

    • Custom attribute/class value to apply the polyfill
    • Shady CSS/DOM support even with the webcomponents polyfill
    • Non standard Element support, like SVG Element with link inside

    ✔️ Browser Support

    Polyfill Edge IE11+ Chrome Firefox Safari
    :focus-within

    * This polyfill maybe work on older versions of the browsers.

    📺 Demos

    The demos folder contains 10+ demos that uses this polyfill.

    Type Title Code Live demo
    Content :focus-within for <button> elements Code Live
    Content :focus-within for <input type="radio"> elements Code Live
    Content :focus-within for <input type="checkbox"> elements Code Live
    Content :focus-within for <div contenteditable> elements Code Live
    Content :focus-within for <div tabindex> elements Code Live
    Content :focus-within for <select> elements Code Live
    Content :focus-within for <svg> elements Code Live
    Content :focus-within for <web-components> elements Code Live
    Content :focus-within for other elements Code Live

    Install

    npm i focus-within-polyfill

    DownloadsWeekly Downloads

    15,283

    Version

    5.2.1

    License

    MIT

    Unpacked Size

    49.1 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar