Open shivamothkuri opened 6 months ago
Hi @shivamothkuri is there any chance you could provide a minimal reproducible test case using something like stackblitz.com or codepen.io?
@shivamothkuri Actually scratch that, I threw together a CodePen repro based on your description: https://codepen.io/nolanlawson-the-selector/pen/jORKJvg
It indeed seems to demonstrate that kagekiri does not reproduce the same behavior as document.querySelector
. Thank you!
Reduction of the issue:
<div class="filters">
<div>
<div>
<select class="templateInputs"></select>
</div>
</div>
</div>
// null
kagekiri.querySelector('div.filters > div:nth-child(1) select.templateInputs')
// <select class="templateInputs"></select>
document.querySelector('div.filters > div:nth-child(1) select.templateInputs')
I think I understand the problem now - basically, as we are matching right-to-left, there is a problem of ambiguity. You can imagine adding multiple layers of <div>
s above to reproduce the issue.
Essentially, kagekiri works right-to-left, and when it matches the div:nth-child(1)
, it continues matching to the left. But since it grabs the nearest div:nth-child(1)
, which is the one immediately surrounding .templateInputs
, it thinks the selector does not match because it "should" have matched the <div>
one level higher, whose parent is .filters
.
You can imagine the algorithm for this getting fairly nasty, as there is potentially a combinatorial explosion of possibilities that kagekiri has to match against.
This is my CSS selector div.filters > div:nth-child(1) select.templateInputs
This works for Puppeteer and devtools element search. But, don't work in Kagekiri
When I digged into the source code, found that this is what happening.
Step1: select.templateInputs has a parent div - which resolves to div.uiInput Step2: div.uiInput has any direct(because of > selector) parent with div.filters? No. It fails here!
Sample html