https://github.com/matteobad/focus-within-polyfill
Small vanilla javascript that feature detect the :focus-within pseudo selector and polyfills it with a standard css class if necessary.
https://github.com/matteobad/focus-within-polyfill
blur focus focus-within polyfill pseudo-classes shadow-dom vanilla-js webcomponents-polyfill
Last synced: about 1 month ago
JSON representation
Small vanilla javascript that feature detect the :focus-within pseudo selector and polyfills it with a standard css class if necessary.
- Host: GitHub
- URL: https://github.com/matteobad/focus-within-polyfill
- Owner: matteobad
- License: mit
- Created: 2019-04-16T19:43:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T07:14:28.000Z (over 2 years ago)
- Last Synced: 2024-04-24T16:24:16.100Z (12 months ago)
- Topics: blur, focus, focus-within, polyfill, pseudo-classes, shadow-dom, vanilla-js, webcomponents-polyfill
- Language: JavaScript
- Homepage: https://matteobad.github.io/focus-within-polyfill/
- Size: 1.09 MB
- Stars: 37
- Watchers: 2
- Forks: 5
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# `:focus-within` Pseudo-Class Polyfill [](https://ko-fi.com/X8X81MJAP)
[](https://badge.fury.io/js/focus-within-polyfill) [](https://travis-ci.org/matteobad/focus-within-polyfill/)   [](https://greenkeeper.io/)
[](https://github.com/semantic-release/semantic-release)  [](https://opensource.org/licenses/MIT)
* [How to use](#how-to-use)
* [How it works](#how-it-works)
* [Features](#features)
* [Browser support](#browser-support)
* [Demo](https://matteobad.github.io/focus-within-polyfill)
---
**Find this usefull? ☕ [Buy me a coffee!](https://ko-fi.com/matteobad)**
---
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](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within).
## ✏️ How to use
This package is available both as production ready script and as a package. The script can be downloaded [here](https://unpkg.com/focus-within-polyfill/dist/focus-within-polyfill.js), or installed with a package manager.
```sh
# npm
npm install focus-within-polyfill --save
# yarn
yarn add focus-within-polyfill
```
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 `: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](https://developers.google.com/web/fundamentals/web-components/shadowdom#what) and with the [webcomponents polyfill](https://www.webcomponents.org/polyfills/). 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](https://www.webcomponents.org/polyfills/)
* _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](https://github.com/matteobad/focus-within-polyfill/tree/master/demos) folder contains 10+ demos that uses this polyfill.
| Type | Title | Code | Live demo |
| --------- | ---------------------------------------------------- | ------------------------------------|------------------------------------------------------------------------------------ |
| Content | :focus-within for `` elements | [Code](demos/buttons.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/buttons.html) |
| Content | :focus-within for `` elements | [Code](demos/radios.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/radios.html) |
| Content | :focus-within for `` elements | [Code](demos/checkboxes.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/checkboxes.html) |
| Content | :focus-within for `
` elements | [Code](demos/editable-text.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/editable-text.html) |
| Content | :focus-within for `` elements | [Code](demos/focusable-divs.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/focusable-divs.html) |
| Content | :focus-within for `` elements | [Code](demos/select.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/select.html) |
| Content | :focus-within for `` elements | [Code](demos/svg.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/svg.html) |
| Content | :focus-within for `` elements | [Code](demos/web-components.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/web-components.html) |
| Content | :focus-within for other elements | [Code](demos/others.html) | [Live](https://matteobad.github.io/focus-within-polyfill/demos/others.html) |