🌸 Cherry-pick request into #25222 (Approved)

[jridgewell]

Cherry-pick request

Issue	PR	Production?	RC?	Release issue
#25245	#25245	No	Yes	#25222

Why does this issue meet the cherry-pick criteria?

All AMP pages are broken in IE 11 due to a bug in the Custom Elements polyfill.

Mini-postmortem

Summary

The new Custom Elements v1 polyfill contained a bug that prevented creating custom element instances in IE 11.

Users affected	Impact
All users of IE11	Complete break of page, no images, videos, ads, etc. Text would work

Root Causes

Custom Elements must extend from the HTMLElement class (required by the CE spec). The new polyfill injected a brand new function HTMLElementPolyfill as a subclass of HTMLElement, and overwrite window.HTMLElement = HTMLElementPolyfill. With proper subclasses, the prototype of both the Class' constructor function and the associated prototype must point to the superclass. Meaning, HTMLElementPolyfill.__proto__ === HTMLElement and HTMLElementPolyfill.prototype.__proto__ === HTMLElement.prototype. This is how subclassing works in ES6 browsers.

When you transpile a subclass, generally, you must have the equivalent of a super() call in the subclass constructor. This is usually compiled to superClass.call(this) as the ES5 way of doing subclass construction.

In IE11, HTMLElement is an exotic host object, and does not extend from the Function class. Because it doesn't extend from Function, HTMLElement.call does not exist (it's defined on Function class). So, when we transpiled super() to HTMLElement.call(this), we got an error.

Action Items

Action Item	Type	Owner	PR #
Add crossorigin=anonymous	Mitigate	@jridgewell	#24731
Add regression test	Prevent	@jridgewell	#25294

Lessons Learned

• IE11 has a lot of nonstandard behaviors.
• Cross origin errors are not reported without crossorigin=anonymous on the scripts

Things that went well

• Ads metrics drop alerted us to the issue within 24hours

Things that went wrong

• The error reports were silently dropped by the browser because they originated from a crossorigin script.

---

/cc @ampproject/wg-approvers @ampproject/cherry-pick-approvers

[zhouyx]

I am the release engineer this week. Let me know when this is ready.

[jridgewell]

PR is already merged, we just need cherry-pick approval.

[dvoytenko]

Approved

[cramforce]

Approved

[zhouyx]

Cherry-pick to canary and RC completed. Assign back to @jridgewell for postmortem

[jridgewell]

Postmortem published, closing.

[dreamofabear]

@jridgewell Is there a regression test we can add or opt-in for IE for CE registration?

[jridgewell]

Integration tests would be all that's necessary, if we enabled them.

[dreamofabear]

Yea, enabling something trivial on IE (e.g. single amp-img integration test) will do.