jQuery#find in 4.x will not work with the ShadyDOM polyfill in forced mode

[blackjackyau]

Description

https://codepen.io/blackjackyau/pen/popVgXy

On a shadydom polyfilled environment, the find() function from Jquery 3.5.0 version and above is not working correctly when there's more than one selector specified.
This behaviour can be seen from the codepen link provided where no result is return from $("#table").find('tr td')[0] but is return from $("#table").find('tr').find('td')[0]

Workaround

• swap the load order of jquery and webcomponents ( to load shadydom polyfill first before jquery )

Link to test case

[mgol]

Thanks for the report. In general, libraries modifying native methods should be included first as otherwise there may be a mismatch between whatever jQuery manages to cache internally before the native methods are swapped.

In this case, the Shady polyfill doesn't seem to handle :scope properly in querySelectorAll, and since .find('tr td') in jQuery actually invokes .querySelectorAll(':scope tr td') on the element underneath, this breaks.

There's nothing jQuery can do here.

[blackjackyau]

@mgol It works with older JQuery version ( lower than 3.5.0 ) and it will work too by downgrading the sizzler library version from the latest JQuery.

As there's no changes on the shady polyfill library, hence it must be caused by the some new changes from the Sizzler library that breaking the behavior

[mgol]

Older versions of Sizzle didn't rely on :scope so much; newer do for performance reasons. So yes, something changed on the jQuery side but that doesn't change what I wrote above.

[blackjackyau]

that explains. thanks

[mgol]

BTW, Sizzle actually does have a support check for :scope support; this is most likely why moving the Shady polyfill before jQuery works - at the point where jQuery does the support test, the polyfill is loaded and :scope doesn't work so Sizzle takes a note of that and doesn't use :scope later on. If the polyfill is loaded after jQuery, the Sizzle support test for :scope passes and that result is cached; then Shady changes querySelectorAll to a version where :scope doesn't work but Sizzle thinks it does.

It's worth noting here that the upcoming jQuery 4.0 doesn't do any support test for :scope; it just skips using it in IE where it's not supported and it assumes it's supported everywhere else. Therefore, the workaround of loading Shady first won't work with jQuery 4.0.0. I suggest raising this issue with the Shady maintainers as they're the ones that need to add support for :scope; all modern browsers support it.

[mgol]

I see there already is a similar issue so I just posted there: webcomponents/polyfills#480