Colon-Prefixed Classes Break :scope Selectors in querySelector/querySelectorAll #3692
Description
Basic info:
- Node.js version:
18.15.0 - jsdom version:
24.0.0
Minimal reproduction case
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const string = `<div class="sm:block"><span></span></div>`;
const html = new JSDOM(string);
const htmldoc = html.window.document;
const div = htmldoc.querySelector('div');
const span = div.querySelectorAll(':scope > span'); // Also breaks if using querySelectorHow does similar code behave in browsers?
This code works fine in web browsers.
Other Details
jsdom appears to substitute the :scope selector with whatever part of the X:-prefixed class name comes after X.
If I change the class="sm:block" to e.g. class="anything-not-colon-prefixed sm:block", it works. It seems the problem only occurs when the only classes defined on the element are those with a : prefix.
Stack Trace
~/jsdom-issue/node_modules/nwsapi/src/nwsapi.js:559
throw err;
^
DOMException [SyntaxError]: unknown pseudo-class selector ':block>*'
at emit (~/jsdom-issue/node_modules/nwsapi/src/nwsapi.js:557:17)
at compileSelector (~/jsdom-issue/node_modules/nwsapi/src/nwsapi.js:1273:17)
at compile (~/jsdom-issue/node_modules/nwsapi/src/nwsapi.js:745:16)
at collect (~/jsdom-issue/node_modules/nwsapi/src/nwsapi.js:1539:22)
at Object._querySelectorAll [as select] (~/jsdom-issue/node_modules/nwsapi/src/nwsapi.js:1499:36)
at HTMLDivElementImpl.querySelectorAll (~/jsdom-issue/node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:78:26)
at HTMLDivElement.querySelectorAll (~/jsdom-issue/node_modules/jsdom/lib/jsdom/living/generated/Element.js:1119:58)
at Object.<anonymous> (~/jsdom-issue/jsdom.js:9:18)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)