Element.closest doesn't work correctly on SVG elements

[tremby]

Say I have a page with an inline SVG which contains a path element.

In Firefox if I do document.querySelector('path').closest('html') I'll get the HTML element.

But in IE11 with the polyfill currently in this repo, I get nothing. This is because parentElement isn't defined on SVG elements.

I notice that the polyfill in this repo doesn't match that on MDN. I guess it's been updated. The one currently on MDN has el.parentElement || el.parentNode in one spot, so I think this issue has been fixed there.

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill

I was going to open a PR with the updated code, but noticed that this polyfill also polyfills Element.prototype.matches. With that in mind I'm not sure how the code for this repo should look. Should it import the Element.prototype.matches polyfill, and so rely on it as a dependency?

[msn0]

I think we can update closest.js to current mdn version and rely on existing Element.prototype.matches, e.g.

import closest from './closest';
import '../Element.prototype.matches';

if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = closest;
}

[msn0]

• mdn-polyfills@5.10.1

Enjoy ;)