Small vanilla javascript that feature detect the :focus-within pseudo selector and polyfills it with a standard css class if necessary.
npm install focus-within-polyfill:focus-within Pseudo-Class Polyfill   !David !David 
 !Commitizen friendly 
* 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 container when the user focuses on one of its fields.
More information on MDN.
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.
``shnpm
npm install focus-within-polyfill --save
When included the polyfill will auto-initialize.
javascript
/ ES5 /
`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:
javascript
/ ES6 /
import 'focus-within-polyfill'
`After import and initialization the polyfill will kick in only if
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