querySelector with :scope

[CemDemirkartal]

Internet Explorer 11 and lower with querySelector(":scope ...") gives error

Do you have alternatives for it, or its not supported ?

[pieterbeulque]

What error do you get? What exactly are you trying to do?

I'd also say polyfilling :scope for IE11 and below is quite far-fetched, since it doesn't work yet in evergreens too (while the styles are getting parsed, they are being applied to :root).

[CemDemirkartal]

IE11 gives, SCRIPT5022: SyntaxError. I try to get child nodes of a node.

I already pollyfilled by myself. If selector text starts with ":scope" then add class "scope-hack" before querySelector and remove class after it. 100% working example.

[JakeChampion]

@CemDemirkartal What you suggest is not a polyfill as that is not how :scope is intended to work according to the specification. Your suggestion would cause bugs in web applications as a node may have the class scope-hack on it.

Here is a polyfill we could use, made by @jonathantneal (He writes lots of really good polyfills!) -- https://www.npmjs.com/package/element-qsa-scope

[CemDemirkartal]

The thing which you suggest adds ID if there is no ID, I gave a class example with "scope-hack" class as a sample, it doesnt need to be in same name which you use.

I didn't suggest this "polyfill-service" to add it. I gave an example and I got this trick from AMP project, they use "i-amphtml-scoped" class.

[jonathantneal]

@CemDemirkartal, @JakeChampion, element-qsa-scope runs tests against many browsers including Internet Explorer 8-11. I’d be honored to have a polyfill added to this service.

https://app.crossbrowsertesting.com/screenshots/2361154?type=windowed&size=medium

@CemDemirkartal, the polyfill only activates if your selector contains :scope, and the temporary ID is only added if none exists, and in those cases it is immediately removed before the collection has been returned. It also knows the difference between an element with no id and an element with an empty ID, and preserves both cases. This is why it’s not just a one liner and adds up to about 628 bytes or ~307 bytes gzipped, not that most people even care about sizes under 1 kb these days. Anyway, if you find any bugs, I’d love it if you opened an issue with the repo.

[JakeChampion]

@jonathantneal sorry for the very late response. I see that the element-qsa-scope polyfill has stated IE support is 8 - 11, have you tested it on IE 7 at all? I only ask because we still support IE7 with our current query selector polyfill and wouldn't be able to drop support without it being a breaking change.

[jonathantneal]

@JakeChampion, it may work, because:

1. You have an IE7 polyfill for document.querySelector.
2. You have an IE7 polyfill for Element.prototype.

Those are the two “IE8+” features that I presume in my polyfill.

Also, let me know if you need me to change the polyfill to better match your conventions. For instance, it includes its own feature test.

[JakeChampion]

@jonathantneal Excellent! If you could provide a version without the in-built feature detection that would be really helpful and mean we can pull in your polyfill directly from npm. :-)

[jonathantneal]

@JakeChampion, that’s great. Quick followups; can I provide a test-less version that isn’t the main reference in my package.json? And then, will I need the test-less version to already be ES5 compat, or do you run babel over things on your end?

I’ll try to get an update pushed today.

[JakeChampion]

@jonathantneal It doesn't need to be listed as the main file, we can pull any file from the npm package :-) It is preferable to have it authored in ES5/ES3 syntax to avoid the need for any on the fly babel compiling.

[dustinpoissant]

This is great @jonathantneal what is the chance this makes it into a polyfill.io bundle?

[romainmenke]

wip pr

blocking issues :

• regexp bug in IE8
• source without feature detection

[emondpph]

Bump. I would be really interested to have that polyfill integrated in polyfill.io