:scope (I guess) breaks normal querySelector

[AlexWayfer]

Microsoft Edge.

<div class="parent">
  <p class="child">
  </p>
</div>

Without DOM4:

document.querySelector('.parent').querySelector('.child') // OK
document.querySelector('.parent').querySelector('.parent > .child') // OK
document.querySelector('.parent').querySelector('> .child') // Syntax Error
document.querySelector('.parent').querySelector(':scope > .child') // Syntax Error

With DOM4:

document.querySelector('.parent').querySelector('.child') // OK
document.querySelector('.parent').querySelector('.parent > .child') // null
document.querySelector('.parent').querySelector('> .child') // OK
document.querySelector('.parent').querySelector(':scope > .child') // OK

[WebReflection]

<div class="parent">
  <div class="parent">
    <p class="child"></p>
  </div>
</div>

now, without testing, what would you expect here?

document.querySelector('.parent').querySelector('.parent > .parent > .child')

it's like trusting a quirk to make things happen ... not sure this is a want fix, I'll think about it

[AlexWayfer]

now, without testing, what would you expect here?

Ofc, .child.

Some references:

MDN web docs:

The first descendant element of baseElement which matches the specified group of selectors. The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.

Article:

It turns out that element.querySelectorAll doesn't match elements starting from element. Instead, it matches elements matching the query that are also descendants of element. Therefore, we're seeing three div elements: div.lonely, div.outer, div.inner. We're seeing them because they both match the div div selector and are all descendants of #my-id.

[WebReflection]

Ofc, .child.

that's because I've tweaked myself with the wrong test ... OK, fair ... I'll see if there's a fix for this without reinventing the whole querySelector engine.

PR welcome, if you have ideas.

[AlexWayfer]

PR welcome, if you have ideas.

Sorry, I don't have for now :(

[AlexWayfer]

I can try, but I don't see any info about contributing, testing, creating a PR…