document.querySelector misbehaving on 'tagName#id'

[Tanimodori]

It ignores the #id part and search for the tagName only.

const window = new Window();
const document = window.document;
const content = document.createElement('div');
content.innerHTML = `<div id="foo">bar</div>`;
document.body.appendChild(content);

console.log(document.querySelector('div#foo').outerHTML);
// <div><div id="foo">bar</div></div>

console.log(document.querySelector('#foo').outerHTML);
// <div id="foo">bar</div>

On my Chrome, both console.log print <div id="foo">bar</div>.

Environment

• happy-dom 6.0.4
• Chrome 105.0.5195.102

[Tanimodori]

Of course you can search #foo in this example, but some libraries may rely on this feature (e.g. document.querySelector should return null when tagName does not match)

[Tanimodori]

According to this W3C selector document, E#myid is a valid selector and considered as "an E element with ID equal to myid."

[capricorn86]

Thank you for reporting and contributing @Tanimodori! 🙂

Your PR has now been merged and released.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v7.0.5