simple focus-within polyfill

focus-within.js

(function(window, document){
	'use strict';
	var slice = [].slice;
	var removeClass = function(elem){
		elem.classList.remove('focus-within');
	};
	var update = (function(){
		var running, last;
		var action = function(){
			var element = document.activeElement;
			running = false;
			if(last !== element){
				last = element;
				slice.call(document.getElementsByClassName('focus-within')).forEach(removeClass);
				while(element && element.classList){
					element.classList.add('focus-within');
					element = element.parentNode;
				}
			}
		};
		return function(){
			if(!running){
				requestAnimationFrame(action);
				running = true;
			}
		};
	})();
	document.addEventListener('focus', update, true);
	document.addEventListener('blur', update, true);
	update();
})(window, document);

Does it work in Edge and IE ? Please, make an example of use for menu with such a structure:

• Menu 1
  • SubMenu 1
  • SubMenu 2
  • SubMenu 3
• Menu 2
  • SubMenu 1
  • SubMenu 2
  • SubMenu 3
• Menu 3
  • SubMenu 1
  • SubMenu 2
  • SubMenu 3

Or all I need is just to include this file to the html ?

Did you test this? Focus events don't bubble, are you sure this will work?

Did you test this? Focus events don't bubble, are you sure this will work?

The true in as the third argument means that it listens for it in the capture phase. https://javascript.info/bubbling-and-capturing

would it be possible to make a repo with a license out of this?

I tried it and It works fine in all browsers. Thanks a lot :)