Polyfill-service: Failed to execute 'appendChild' on 'Node'

[shtse8]

// generate sandboxed iframe
    var vbody = document.appendChild(document.createElement('body'));
    var frame = vbody.appendChild(document.createElement('iframe'));

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

An error is occur when using the polyfill.

[JakeChampion]

Which browser was this on and which polyfills were you loading?

[shtse8]

Because some users reported to us they need to wait for cdn.polyfill.io to load my site. That's why I want to put the polyfill to my server, so that I can send the polyfill to clients with my other scrips in one request. So I have downloaded the full polyfill using this link.

https://cdn.polyfill.io/v2/polyfill.js?features=IntersectionObserver&unknown=polyfill&ua=unknown

I am using the latest Chrome.

[shtse8]

I am using IntersectionObserver and requestAnimationFrame. But the error code is from Element polyfill. (Due to the dependency, Element, License: CC0 (required by "Event", "IntersectionObserver"))

I have tried to exclude this polyfill and everything works fine. So I believe Element polyfill got some bugs.

[JakeChampion]

What is the user-agent of the browser which throws the error?

[shtse8]

I have solved this problem by using flags=gated.

[SivanMehta]

@shtse8 Do you happen to know how or why flags=gated fixed this issue? I would like to avoid this issue in the future, but am unsure about blindly copying a querystring to fix the problem.

[antoinerousseau]

I still get this error in Chrome (when forcing the polyfill execution with always flag and without gated), is this because it's only working in targeted browsers? Or is it failing in them too?

[DullReferenceException]

@JakeChampion: we've recently started seeing this issue with this UA used by the Instagram app:

Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13F69 Instagram 8.4.0 (iPhone7,2; iPhone OS 9_3_2; nb_NO; nb-NO; scale=2.00; 750x1334

...with these params:

?unknown=polyfill
&features=default
 %2Cfetch
 %2CArray.prototype.%40%40iterator
 %2CArray.prototype.find
 %2CArray.prototype.findIndex
 %2CFunction.name
 %2CNumber.isFinite
 %2CPromise
 %2CString.prototype.repeat
 %2CArray.prototype.includes
 %2CIntl.~locale.en-US

We're going to try the flags=gated option. The polyfill library line that's failing is here:

https://github.com/Financial-Times/polyfill-library/blob/f7fe94f900c8fae9b97365a044b114514b0db732/polyfills/Element/polyfill.js#L13

I can't help but think this is likely a false positive polyfill, since it seems super unlikely that window. HTMLElement and window.Element need to be polyfilled (unless I'm misunderstanding the purpose of that code).

We started getting reports of this problem around 1:25 PM Pacific.

[JakeChampion]

@DullReferenceException Are you using polyfill.io/v2/polyfill.js or polyfill.io/v3/polyfill.js? v3 would have this issue fixed by serving the polyfills wrapped in feature detects for the browser.

[rpokrovskij]

@JakeChampion I use v3 but issue is not fixed. ?flags=always have the error Failed to execute 'appendChild' on 'Node': Only one element on document allowed. when
polyfill saved from url
https://polyfill.io/v3/polyfill.js?flags=gated&features=Element.prototype.closest%2CElement.prototype.classList%2CElement.prototype.matches and loaded with <script> works well

[JakeChampion]

@rpokrovskij That is because you are using the always flag, not all polyfills work in all browsers but with the always flag you are asking for all polyfills to be served to all browsers. If you want to use always flag you should combine it with the gated flag to ensure that polyfills do not run on browsers which do not require them. E.G. https://polyfill.io/v3/polyfill.js?flags=always,gated&features=Element.prototype.closest%2CElement.prototype.classList%2CElement.prototype.matches

What was the full polyfill.io url you used and what was the browser you tested on and it's full user-agent string?

[rpokrovskij]

you are right with both options flags=always,gated bundle works:
thank you for the explanation