[bug] Non-gated IntersectionObserver polyfill breaks the whole polyfill bundle

[okovpashko]

What

There's a script error when adding IntersectionObserver polyfill with always and without gated flag: https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver&flags=always

Details

I found the issue in Safari 9, 10, 11 that don't have IntersectionObserver when I was trying to force adding a polyfill with the manual feature detection. The issue is reproduced in the latest Chrome and Firefox as well.

Safari:

HierarchyRequestError: The operation would yield an incorrect node tree.

Chrome:

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

The error seems to be caused by the Element polyfill that's trying to create body DOM element and append it to the existing document here.
I'm not 100% sure that this code is invalid and maybe it's a kind of tweak for the old browsers but two body tags in the same document look strange and relatively modern browsers complain about it.

Here is a minimal example. See console output in the browser's DevTools.

[JakeChampion]

Yes, this is to be expected behavior. The always flag will load all requested polyfills and all their dependent polyfills. You can work around this by adding Element|gated to your features parameter to load Element polyfill in a feature detect.

I will also fix this by inlining a feature detect into Element polyfill -- #481

[okovpashko]

@JakeChampion thanks for the answer and for the fix.
Is this correct at all to add the second body element to the document? It looks like a kind of magic for the very old browsers.