focus-within-polyfill

:focus-within Pseudo-Class Polyfill

• How to use
• How it works
• Features
• Browser support
• Demo

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 including the polyfill in a script tag, call window.focusWithin.polyfill(string) method to initialize the polyfill:

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

focusWithin.polyfill()

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 focusWithin from 'focus-within-polyfill'

focusWithin.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] attribute will be added automatically to every element that should have the pseudo-class. Additionally in the initialization fase a custom class or custom attribute can be specified like in the example below:

focusWithin.polyfill('[focus-within]'); // default
focusWithin.polyfill('[focus-inside]'); // custom attribute
focusWithin.polyfill('.focus-within'); // custom class

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	IE9+	Chrome	Firefox	Safari
:focus-within	✓	✓	✓	✓	✓

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

Demo

You can try a working demo here.

Changelog

4.1.0 (2019-05-02)

Features

• add support for shadow dom (01707bf)