🐛 Fix Custom Element instance creation in IE11 #25245
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When we transpile `super` in Custom Element subclasses, we change it to `superClass.call(this)` (where `superClass` is `HTMLElementPolyfill`). That `.call` value is inherited from `Function.prototype`. But, IE11's native HTMLElement hierarchy doesn't extend from Function! And because `HTMLElementPolyfill` extends from `HTMLElement`, it doesn't have a `.call`! So we need to manually install it.
dreamofabear
approved these changes
Oct 24, 2019
|
Is there an IE11 integration test for this? You'll need to call amphtml/test/integration/test-amp-ad-doubleclick.js Lines 19 to 23 in c4a663d |
zhouyx
pushed a commit
that referenced
this pull request
Oct 25, 2019
When we transpile `super` in Custom Element subclasses, we change it to `superClass.call(this)` (where `superClass` is `HTMLElementPolyfill`). That `.call` value is inherited from `Function.prototype`. But, IE11's native HTMLElement hierarchy doesn't extend from Function! And because `HTMLElementPolyfill` extends from `HTMLElement`, it doesn't have a `.call`! So we need to manually install it.
micajuine-ho
pushed a commit
to micajuine-ho/amphtml
that referenced
this pull request
Dec 27, 2019
When we transpile `super` in Custom Element subclasses, we change it to `superClass.call(this)` (where `superClass` is `HTMLElementPolyfill`). That `.call` value is inherited from `Function.prototype`. But, IE11's native HTMLElement hierarchy doesn't extend from Function! And because `HTMLElementPolyfill` extends from `HTMLElement`, it doesn't have a `.call`! So we need to manually install it.
jridgewell
added a commit
to jridgewell/amphtml
that referenced
this pull request
Apr 15, 2020
This is a continuation of ampproject#25245. All of our Custom Elements extend from a common `CustomAmpElement` class, which itself extends from `HTMLElementPolyfill`. In ampproject#27470, I removed the `constructor` from `CustomAmpElement` class. But, because it's a subclass and must have a `constructor` that calls `super()`, Closure replaced it with a `constructor() { superClass.apply(this, arguments); }` when transpiling. But, due to the same faulty inheritance chain described in ampproject#25245, `HTMLElementPolyfill` doesn't inherit an `apply` method! So doing `superClass.apply()` throws an error. 😭 This PR installs all important Function methods onto our polyfill, to be resilient to any future changes in the instance creation.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When we transpile
superin Custom Element subclasses, we change it tosuperClass.call(this)(wheresuperClassisHTMLElementPolyfill). That.callvalue is inherited fromFunction.prototype.But, IE11's native
HTMLElementhierarchy doesn't extend fromFunction! And becauseHTMLElementPolyfillextends fromHTMLElement, it doesn't have a.call! So we need to manually install it.