{"id":13397840,"url":"https://github.com/matteobad/focus-within-polyfill","last_synced_at":"2025-07-05T09:07:06.937Z","repository":{"id":34675288,"uuid":"181755904","full_name":"matteobad/focus-within-polyfill","owner":"matteobad","description":"Small vanilla javascript that feature detect the :focus-within pseudo selector and polyfills it with a standard css class if necessary.","archived":false,"fork":false,"pushed_at":"2022-12-03T07:14:28.000Z","size":1145,"stargazers_count":37,"open_issues_count":12,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-22T10:50:48.714Z","etag":null,"topics":["blur","focus","focus-within","polyfill","pseudo-classes","shadow-dom","vanilla-js","webcomponents-polyfill"],"latest_commit_sha":null,"homepage":"https://matteobad.github.io/focus-within-polyfill/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matteobad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-16T19:43:56.000Z","updated_at":"2024-11-23T15:43:19.000Z","dependencies_parsed_at":"2023-01-15T08:30:42.094Z","dependency_job_id":null,"html_url":"https://github.com/matteobad/focus-within-polyfill","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/matteobad/focus-within-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobad%2Ffocus-within-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobad%2Ffocus-within-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobad%2Ffocus-within-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobad%2Ffocus-within-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matteobad","download_url":"https://codeload.github.com/matteobad/focus-within-polyfill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobad%2Ffocus-within-polyfill/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263628950,"owners_count":23491086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blur","focus","focus-within","polyfill","pseudo-classes","shadow-dom","vanilla-js","webcomponents-polyfill"],"created_at":"2024-07-30T18:01:48.178Z","updated_at":"2025-07-05T09:07:06.918Z","avatar_url":"https://github.com/matteobad.png","language":"JavaScript","funding_links":["https://ko-fi.com/X8X81MJAP","https://ko-fi.com/matteobad"],"categories":["JavaScript"],"sub_categories":[],"readme":"# `:focus-within` Pseudo-Class Polyfill \u0026nbsp; [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/X8X81MJAP)\n\n[![npm version](https://badge.fury.io/js/focus-within-polyfill.svg)](https://badge.fury.io/js/focus-within-polyfill) [![Build Status](https://travis-ci.org/matteobad/focus-within-polyfill.svg?branch=master)](https://travis-ci.org/matteobad/focus-within-polyfill/) ![David](https://img.shields.io/david/dev/matteobad/focus-within-polyfill.svg) ![David](https://img.shields.io/david/matteobad/focus-within-polyfill.svg) [![Greenkeeper badge](https://badges.greenkeeper.io/matteobad/focus-within-polyfill.svg)](https://greenkeeper.io/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) ![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-blue.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n* [How to use](#how-to-use)\n* [How it works](#how-it-works)\n* [Features](#features)\n* [Browser support](#browser-support)\n* [Demo](https://matteobad.github.io/focus-within-polyfill)\n\n---\n\n**Find this usefull? ☕ [Buy me a coffee!](https://ko-fi.com/matteobad)**\n\n---\n\nThe `: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).\n\nThis selector is useful, to take a common example, for highlighting an entire `\u003cform\u003e` container when the user focuses on one of its `\u003cinput\u003e` fields.\n\nMore information on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within).\n\n## ✏️ How to use\n\nThis 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.\n\n```sh\n# npm\nnpm install focus-within-polyfill --save\n\n# yarn\nyarn add focus-within-polyfill\n```\n\nWhen included the polyfill will auto-initialize.\n\n```javascript\n/* ES5 */\n\u003cscript src='https://unpkg.com/focus-within-polyfill/dist/focus-within-polyfill.js'\u003e\u003c/script\u003e\n```\n\nIn 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:\n\n```javascript\n/* ES6 */\nimport 'focus-within-polyfill'\n```\n\nAfter 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.\n\n## 📃 How it works\n\nThis 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.\n\nThis 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.\n\n## ⭕ Features\n\n* _Custom attribute/class_ value to apply the polyfill\n* _Shady CSS/DOM_ support even with the [webcomponents polyfill](https://www.webcomponents.org/polyfills/)\n* _Non standard Element_ support, like SVG Element with link inside\n\n## ✔️ Browser Support\n\n| Polyfill        | Edge | IE11+ | Chrome | Firefox | Safari |\n| --------------- |:----:|:-----:|:------:|:-------:|:------:|\n| `:focus-within` | ✓    | ✓     | ✓      | ✓       | ✓      |\n\n\\* This polyfill maybe work on older versions of the browsers.\n\n## 📺 Demos\n\nThe [demos](https://github.com/matteobad/focus-within-polyfill/tree/master/demos) folder contains 10+ demos that uses this polyfill.\n\n| Type      | Title                                                | Code                                | Live demo                                                                           |\n| --------- | ---------------------------------------------------- | ------------------------------------|------------------------------------------------------------------------------------ |\n| Content   | :focus-within for `\u003cbutton\u003e` elements                | [Code](demos/buttons.html)          | [Live](https://matteobad.github.io/focus-within-polyfill/demos/buttons.html)        |\n| Content   | :focus-within for `\u003cinput type=\"radio\"\u003e` elements    | [Code](demos/radios.html)           | [Live](https://matteobad.github.io/focus-within-polyfill/demos/radios.html)         |\n| Content   | :focus-within for `\u003cinput type=\"checkbox\"\u003e` elements | [Code](demos/checkboxes.html)       | [Live](https://matteobad.github.io/focus-within-polyfill/demos/checkboxes.html)     |\n| Content   | :focus-within for `\u003cdiv contenteditable\u003e` elements   | [Code](demos/editable-text.html)    | [Live](https://matteobad.github.io/focus-within-polyfill/demos/editable-text.html)  |\n| Content   | :focus-within for `\u003cdiv tabindex\u003e` elements          | [Code](demos/focusable-divs.html)   | [Live](https://matteobad.github.io/focus-within-polyfill/demos/focusable-divs.html) |\n| Content   | :focus-within for `\u003cselect\u003e` elements                | [Code](demos/select.html)           | [Live](https://matteobad.github.io/focus-within-polyfill/demos/select.html)         |\n| Content   | :focus-within for `\u003csvg\u003e` elements                   | [Code](demos/svg.html)              | [Live](https://matteobad.github.io/focus-within-polyfill/demos/svg.html)            |\n| Content   | :focus-within for `\u003cweb-components\u003e` elements        | [Code](demos/web-components.html)   | [Live](https://matteobad.github.io/focus-within-polyfill/demos/web-components.html) |\n| Content   | :focus-within for other elements                     | [Code](demos/others.html)           | [Live](https://matteobad.github.io/focus-within-polyfill/demos/others.html)         |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobad%2Ffocus-within-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatteobad%2Ffocus-within-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobad%2Ffocus-within-polyfill/lists"}