:matches() CSS pseudo-class does not match any elements in querySelectorAll()

[danburzo]

Basic info:

• Node.js version: v14.2.0 (local), v10.21.0 (Runkit)
• jsdom version: 16.3.0

Minimal reproduction case

let { JSDOM } = require('jsdom');
let doc = new JSDOM(`
    <h2>Heading</h2>
    <h3>Subheading</h3>
`).window.document;

console.log([...doc.querySelectorAll('h2,h3')]); // => 2 elements
console.log([...doc.querySelectorAll(':matches(h2,h3)')]); // => 0 elements

Runkit live demo

How does similar code behave in browsers?

In Firefox 78, which supports the :is() selector, both queries result in two elements. Safari, for :matches(), and Chrome, for :-webkit-any(), give the same result.

I know things are still in flux in regards to the :is() and :where() pseudo-classes, but since the :matches() selector exists in JSDOM it is suprising behavior.

[domenic]

I'm not sure what to do with this issue. Why do you think JSDOM supports :matches()? The intention is to only support standards, and :matches() is non-standard.

It'd be worth filing a feature request for :is() on https://github.com/dperini/nwsapi, perhaps.

[danburzo]

I initially expected it to work because it seemed to support a single selector (e.g. :matches(h2)) and it didn't complain matches was an unrecognized pseudo-class. I wasn't aware of the separate nwsapi project, that sounds like the right place to file an issue / feature request.

I guess we can close this issue, right? I can submit a PR once/if the feature makes it in nwsapi.