I'm using svelte+rollup+rollup-plugin-polyfill

SCRIPT438: Object doesn't support property or method 'closest'

still occurs even though I include

polyfill(['@webponents/webponentsjs','element-closest']),

in my rollup.js.

the call occurs in this code:

function onDocumentClick (e) {
    if (!e.target.closest('.autoplete')) close();
}

why the polyfill does not exist? and though, how to correctly use it? I'm thinking of just replacing .closest with one IE11 supports.

I'm using svelte+rollup+rollup-plugin-polyfill

SCRIPT438: Object doesn't support property or method 'closest'

still occurs even though I include

polyfill(['@webponents/webponentsjs','element-closest']),

in my rollup.js.

the call occurs in this code:

function onDocumentClick (e) {
    if (!e.target.closest('.autoplete')) close();
}

why the polyfill does not exist? and though, how to correctly use it? I'm thinking of just replacing .closest with one IE11 supports.

• javascript
• internet-explorer
• svelte
• rollupjs

• 1 The .closest() method of the DOM traversal has nothing to do with Web Components, that's why it will unlikely be found in any suite of Web Components polyfills. However, you can quite easily polyfill it manually, e.g. with one of the methods provided by MDN: developer.mozilla/en-US/docs/Web/API/Element/… – Ilya Streltsyn Commented Dec 23, 2019 at 12:33

1 Answer 1

Use Polyfill

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

Closest in detail and Polyfill