Colon-Prefixed Classes Break :scope Selectors in querySelector/querySelectorAll

[cooperwalbrun]

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 querySelector

How 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)