Метод closest не срабатывает на IE 10,11 (?)

[yaparoff]

Не срабатывает метод closest на IE 11

_removeImage(e) {
    const imageItem = e.target.closest('.add-images__item');
    this.imagesRow.removeChild(imageItem);
    if(!this.imagesRow.querySelector('.add-images__item')) {
      this.imagesRow.classList.add('visually-hidden');
    }
  }

В IE11, который установлен у меня на рабочей машине (Windows 10) приведенный выше код работает корректно.
Когда тестируешь на browserstack, выбираешь Windows 10 -> IE 11
то приведенный ниже код не работает. Указывает что const imageItem = null

Вот и думаю что за ерунда и как это исправить.
Нашел вот такой код-полифил

(function(ELEMENT) {
    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
        if (!this) return null;
        if (this.matches(selector)) return this;
        if (!this.parentElement) {return null}
        else return this.parentElement.closest(selector)
      };
}(Element.prototype));

и еще вот

(function(e){ 
 e.closest = e.closest || function(css){ 
   var node = this;
  
   while (node) { 
      if (node.matches(css)) return node; 
      else node = node.parentElement; 
   } 
   return null; 
 } 
})(Element.prototype)

Но как их сюда подставить? У меня просто проект большой, все в ООП. Этих closest там много и что мне каждый раз прописывать этот фикс в месте где closest встречается? Меня еще смущает то, что это IIFE-функция и куда ее прописывать?

до этого просто не использовал такие полифиллы. Надеюсь на помощь

[рони]

yaparoff,
добавить один раз на страницу в начале

<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>

[j0hnik]

или вот этот код в начало скрипта.

(function(ELEMENT) {
	ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
	ELEMENT.closest = ELEMENT.closest || function closest(selector) {
		if (!this) return null;
		if (this.matches(selector)) return this;
		if (!this.parentElement) {return null}
			else return this.parentElement.closest(selector)
		};
}(Element.prototype));

[j0hnik]

рони,
у вас там много всего

[рони]

j0hnik,
там ничего или будет только closest и только в ie

[j0hnik]

рони, файл то откывали?

<div></div>
	<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
	<script>
var span = document.createElement('span');
document.querySelector("div").replaceWith(span);
	</script>

в ie запустите

[рони]

j0hnik,
протестируйте с этими параметрами

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.closest"></script>

https://cdn.polyfill.io/v2/docs/examples

[yaparoff]

рони, j0hnik, спасибо, все решилось
Создал отдельный файл, в котором написан полифил для closest

(function(e){
  e.closest = e.closest || function(css){
    var node = this;

    while (node) {
      if (node.matches(css)) return node;
      else node = node.parentElement;
    }
    return null;
  }
})(Element.prototype);

и полифил для matches

if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;
    };
}

[j0hnik]

рони,
Этот норм

[рони]

yaparoff,
преимущество сервиса cdn.polyfill.io в том что он самостоятельно определяет что грузить надо или нет необходимости, в вашем случае для firefox например, код будет лишним.