-
Notifications
You must be signed in to change notification settings - Fork 167
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Custom Elements] Error in IE11: The custom element being constructed was not registered with customElements
.
#108
Comments
The other error that also appears in the console is reported in webcomponents/shadydom#207. |
The pen is quite big. Could you provide a minimal reproduction case that shows the issue? That eases the debugging process. |
+1 Simple use case:
|
I found this chunk in there which seems to prevent the original constructor from being found: var _fixBabelExtend = function (O) {
var gOPD = O.getOwnPropertyDescriptor,
gPO = O.getPrototypeOf || function (o) {
return o.__proto__;
},
sPO = O.setPrototypeOf || function (o, p) {
o.__proto__ = p;
return o;
},
construct$$1 = typeof Reflect === 'object' ? _Reflect$construct : function (Parent, args, Class) {
var Constructor,
a = [null];
a.push.apply(a, args);
Constructor = Parent.bind.apply(Parent, a);
return sPO(new Constructor(), Class.prototype);
};
return function fixBabelExtend(Class) {
var Parent = gPO(Class);
return sPO(Class, sPO(function Super() {
return construct$$1(Parent, arguments, gPO(this).constructor);
}, Parent));
};
}(Object); These two lines in particular confuse me: Constructor = Parent.bind.apply(Parent, a);
return sPO(new Constructor(), Class.prototype); I think The part I find most confusing about those lines is that modifying it like this: Constructor = Parent.bind.apply(Parent, a);
Constructor.prototype = Object.create(Parent.prototype); // new
Constructor.prototype.constructor = Class; // new
return sPO(new Constructor(), Class.prototype); doesn't actually change the prototype of the object that becomes const F = function() {
console.log("this ->", this);
console.log(
"Object.getPrototypeOf(this) === F.prototype ->",
Object.getPrototypeOf(this) === F.prototype
);
};
const G = F.bind(null);
G.prototype = Object.create(F.prototype);
G.prototype.constructor = G;
new G(); output:
In general, I don't think this is an issue with the polyfill but rather (Edit: Also I bet this is only shows up in IE11 because |
Now I realize why that |
I have posted a question here: https://stackoverflow.com/questions/50617479/angular-6-custom-elements-fail-on-ie11-and-firefox-with-syntax-and-shadow-dom-er because these polyfills really don't seem to be working on IE11? |
https://github.com/WebReflection/document-register-element is the unique polyfill that works fine to me on IE11. |
The Babel 7.0.0 beta releases have changed the way they transform ES6 classes extending built-in constructors which may only be constructed with In the Polymer tools repo, for the CLI's build and serve commands, we've pinned @babel/plugin-transform-classes to 7.0.0-beta.35 in the mean time. I'm still trying to come up with a good solution for this; as of now, sending a patch to @babel/plugin-transform-classes adding a plugin option that would let you explicitly disable their special |
customElements
.customElements
.
@bicknellr Think this is still an issue? |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Description
CustomElementInternals.js
causes an error in IE.Live Demo
Run this pen in IE11:
https://codepen.io/anon/pen/dJerjB
Steps to Reproduce
See the pen in IE11. You can use http://crossbrowsertesting.com to test the pen in IE11 for free (click "Change View" in the pen to see a link to "Open on CrossBrowserTesting".
Expected Results
no error
Actual Results
You'll get an error
pointing to this line:
https://github.com/webcomponents/custom-elements/blob/134c58e6b21a6788f18b715ac5d70ede0cad779f/src/CustomElementInternals.js#L275
(on column
7
, and based on the source map)Browsers Affected
Versions
webcomponentsjs@1.0.22
, using https://unpkg.com/@webcomponents/webcomponentsjs@1.0.22/webcomponents-sd-ce.jsThe text was updated successfully, but these errors were encountered: