:focus-within Pseudo-Class Polyfill  

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

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 |