unknown pseudo-class selector ':is(:is(button, input)[type=submit]'

[ale-cci]

Hi, I'm using jsdom@20.0.0 which has nwsapi@2.2.2 as dependency. Additionally the polyfill element-internals-polyfill is installed, which uses the following query selector:

const SUBMIT_BUTTON_SELECTOR = ':is(:is(button, input)[type=submit], button:not([type])):not([disabled])';

This works on chrome (version n 107.0.5304.110), however when the query is parsed by nwsapi , the following exception is raised (stacktrace added for context):

 SyntaxError: unknown pseudo-class selector ':is(:is(button, input)[type=submit]'

      at emit (node_modules/nwsapi/src/nwsapi.js:570:17)
      at compileSelector (node_modules/nwsapi/src/nwsapi.js:1297:17)
      at compile (node_modules/nwsapi/src/nwsapi.js:758:16)
      at match_collect (node_modules/nwsapi/src/nwsapi.js:1363:16)
      at _matches (node_modules/nwsapi/src/nwsapi.js:1418:35)
      at Object._closest [as closest] (node_modules/nwsapi/src/nwsapi.js:1347:13)
      at HTMLElementImpl.closest (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:546:20)

Here a way to reproduce the issue (using jsdom):

const {JSDOM} = require('jsdom')
const dom = new JSDOM('<div> <button type="submit"></button> </div>');
const childs = dom.window.document.body.querySelectorAll(':is(:is(button, input)[type=submit], button:not([type])):not([disabled])')
console.log(childs.length)

Any help would be appreciated

Thanks Alessandro

[dperini]

@ale-cci thank you for your help and testing. I understand and confirm your findings, at the moment "nwsapi" does not support nesting the ":is()" pseudo-class. So I will soon have a look and see if I can implement that as for the current spec.

However, in the mean time, you could avoid using these nesting capabilities buy using the "OR" (comma grouping) feature which historically has wider support in "nwsapi", it is optimized and shorter in syntax (20 bytes) and maybe faster too (haven't benchmarked it):

const childs = dom.window.document.body.querySelectorAll(':is(button, input)[type=submit]:not([disabled])')

or use the following one if "button:not([type])" has meaning iin your dom tree:

const childs = dom.window.document.body.querySelectorAll(':is(button, input)[type=submit], button:not([type]):not([disabled])')

Thank you again for the efforts and your time

[dperini]

@ale-cci I am closing this because the issue was seemingly resolved.