Css OR does not work

[Lotafak]

Hey there!

I was wondering if that's the expected behaviour of the package, but selectors like .header, .header-2 does not work properly. For my purpose, there's a pretty easy workaround, like i.e.

['.header', '.header-2'].some((sel) => querySelectorShadowDom.querySelectorAllDeep(sel))

but it makes things more complicated in the scenarios when I only want to pass a selector to already existing function. The version of the package is 0.0.7

[Georgegriff]

@Lotafak Sorry for the delay in response. I'm struggling to reproduce your problem when i do:

querySelectorAllDeep.('.header, .header-2')

I recieve an array of all of the elements that match either ".header" or ".header-2" Would you be able to be more specfic about what is not working properly? Thanks

[Lotafak]

That's interesting. My exact problem what what is working for you. When I executed

querySelectorAllDeep('.header, .header-2')

I received nothing and when I executed those 2 separately I get the expected result. Might it be related to the version of the project that I'm running?

[Georgegriff]

@Lotafak there hasnt been many code changes between the version you're using and the current, maybe just docs and possibly a method name (I forgot to tag the old versions)

I'm looking at the code now and see that there may potentially be an issue with these selectors. These kind of selectors are a little tricky to deal with. Will update you if i find something.

If you could provide any specific examples reproducing the problem that would help a lot! 😄

[Georgegriff]

@Lotafak I have found a bug around having multiple whitespace characters in selectors, though it doesn't seem to affect the selector that you listed in your example.

I've just fixed it in a new version to the package: 0.2.2 There haven't been any breaking changes since the 0.0.7 version you have. I'm not entirely sure that this will fix your issue though, but if you could give it a go and let me know that would be fantastic.

If it still doesn't work, perhaps if you could provide an example that i could try out that demonstrates your problem would be really helpful.

Either way thanks for the issue because i might not have found that bug 🥇

[Lotafak]

Thank you very much for effort of looking into it! Providing an example might be problematic, as it's not public page, unfortunately. Also, the selector I provided wasn't the original one, I simplified it for an example purpose. I can provide the original one tho:

'xxx-orange-move-money-view-layout [slot="content-title"], xxx-uic-dialog.error-dialog'

There doesn't seem to be additional spaces in the selector.

I will try to reproduce the issue somewhere, possibly in a public site, then try your fix and give feedback. Once again thanks for your work!

[Georgegriff]

@Lotafak No problem, i understand. Thanks for the example, i'll see if i can see anything based on your example

[Georgegriff]

@Lotafak I just reproduced your issue, an oversite in my handling of selectors, i didn't know that "xxx-orange-move-money-view-layout [slot="content-title"]" and "xxx-orange-move-money-view-layout[slot="content-title"]" are both valid.

I suspect if you remove the space before your attribute selector, the current version should work for you. Unless your selector was intentional and wanted to select any element after "xxx-orange-move-money-view-layout" that matches the attribute Either way there is a bug

I think i should be able to account for this, i'll see what i can do

[Lotafak]

So, basically, the problem is lack of element for the attribute? If that's the case I can easily fix that and be conscious about in the future, although yes, that's valid css selector

[Lotafak]

Oh, I think you misunderstood

xxx-orange-move-money-view-layout [slot="content-title"]

and

xxx-orange-move-money-view-layout[slot="content-title"]

are two different selectors. Basically for the sake of making it work I could add an element like

xxx-orange-move-money-view-layout div[slot="content-title"]

[Georgegriff]

Makes sense, you're correct in that the root of the problem is the OR selector. The issue is: In order to walk up the shadow roots to find elements i do some best guess splitting of the css selector at logical points. When it comes to a selector that does .parent .child, .another-element

What is happening in the code is: Logical split 1: .parent Logical split 2: .child, .another-element

The reason for this split is i need to walk back up the tree in order to check that the selector matches, so the selector needs to be split into the parts that can match particular elements.

I might not be able to support OR selectors like this.

querySelectorAllDeep(`.header-1 .header-2, .header-3`);

Exhibits the same problem. I'll think on it a bit to see if there is anything i can do.

I suspect spaces in attribute values will currently also cause an issue, which i'm looking into.

I'd like to be able to support the selector you provided

[Georgegriff]

I think i have a fix for the comma issue, writing some tests and will update. Seems rather obvious now, but my logic for splitting up the query was slightly flawed.

[Georgegriff]

@Lotafak Released a new version which i believe should fix the issues you were finding 0.2.3 The issue highlighted a couple of other issues with attribute selectors. I believe i'm now handling selector-lists correctly. If your issue persists happen to repoen

[Lotafak]

I've put code to testing, I'll see what the result is and if something still not right I'll come back to you. Thank you for collaboration!