Source order is not preserved when using multiple selectors

[Kilian]

trafficstars

querySelectorAll with multiple selectors returns the elements in source order. So the following HTML:

<h1> h1 </h1>
  <h2> h2 </h2>
    <h3> h3 </h3>
  <h2> h2 </h2>
    <h3> h3 </h3>

Combined with this javascript: document.querySelectorAll("h1, h2, h3"); will return [h1, h2, h3, h2, h3]. The equivalent querySelectorAllDeep however returns those listed selector by selector: [h1, h2, h2, h3, h3]. That can be quite an important difference. Is that worth fixing (I guess that might be difficult) or at least mentioning in the readme?

[Georgegriff]

Thanks for the issue, I'll take a look when I get time, with your example is shadow Dom involved at all? In your example it's not clear to me when or if shadow Dom is involved

[Kilian]

This is without shadow Dom involved, though I assume that won't make a difference.

[Georgegriff]

I took a look at this, I think this would be very difficult to fix, given how the library works, as such i've updated the readme with a known limitations block https://github.com/Georgegriff/query-selector-shadow-dom/blob/main/README.md#known-limitations.

I contemplated ways in which to fix this but I think it would be difficult with Shadow DOM, i'd need to keep track of where was in the tree when i find result, and use that to order the elements. I think this would be possible but i'd need to do a breaking change, since the order of results may change for users, i'll leave the issue open and think on it a bit more

[mcqua007]

@Georgegriff It would be really great if there was another function that preserved the order. This is needed for things like focus traps etc... I understand not wanting to make breaking changes that's why making it another function could work. Something like querySelectorAllDeepOrdered.

For those of you looking to preserve this library may help:

https://github.com/43081j/shadow-dom-utils