Unknown pseudo-class selector ':host>*'

elchininet commented 11 months ago

Basic info:

It is not possible to use the :host pseudo class inside the selector parameter of querySelector or querySelectorAll in jsdom.

Node.js version: 18.17.1
jsdom version: 22.1.0

Minimal reproduction case

const jsdom = require('jsdom');
const dom = new jsdom.JSDOM(`
<!DOCTYPE html>
<html lang="en">
    <body></body>
</html>
`);
const document = dom.window.document;

const section = document.createElement('section');
const article = document.createElement('article');
const shadowSection = section.attachShadow({ mode: 'open' });

shadowSection.appendChild(article);
document.body.appendChild(section);

const OK = document.querySelector('section').shadowRoot.querySelector('article');
const KO = document.querySelector('section').shadowRoot.querySelector(':host > article');

How does similar code behave in browsers?

In browsers, both queries return the same element, the first one just queries for an article in any place inside the shadow DOM subtree, the second one specificaly queries for an article that is an inmmediate child of the shadowRoot using the :host pseudo class.

https://jsbin.com/nifuso/edit?html,js,console

elchininet commented 9 months ago

Hi @domenic, Just to report that after the inclussion of dom-selector this issue seems to be fixed, the selection with :host doesn‘t throw an error and it selects the proper element (it keeps failing with version 23.1.0). You can close the issue if you prefer or let it open if you want to write some tests to cover it. Regards

domenic commented 9 months ago

Thanks for the report! Our plan is to keep this (and other selector issues) open until we have tests checked in to the repository to prevent regressions. Also, unfortunately, per #3659, we may have to revert the dom-selector integration. Your report here makes me think doing so in a major version might be better...

jsdom / jsdom