Error: The custom element being constructed was not registered with customElements. in firefox
#809
Comments
|
Small update, on a windows PC now. Same error still on firefox 54.0.1 on Windows 10. Also happens in IE 11.0.43 (version 11.1358.14393.0) and Edge 38.14393.1066.0. So this is more commonplace than just firefox. |
|
I got here via #811 and tried to replicate the example provided by @yannickl88. The example is valid reproduction path, but contains a small error. Before defining the customElement, you need to wait for the webcomponents ready event. I think Yannick went a bit overboard simplifying his example :-) window.addEventListener('WebComponentsReady', function () {
window.customElements.define('fancy-button', FancyButton);
});In my situation I am getting a |
|
It worked for me the preset bundled build, after disabling MINIFY for html for Firefox. Chrome it was working fine.Problem faced by me even with the Polymer 2 starter kit. |
|
Hi, there's a couple of issues with the provided example that are preventing this from working: function FancyButton() {
// The result of your `super()` replacement needs to be used as if it were `this`.
// However, it also needs to default to the real `this` in case it doesn't explicitly
// return something.
var _this = HTMLElement.call(this) || this;
/* ... do stuff with `_this` as if it were `this` ... */
requestAnimationFrame(function() {
// This was moved into a `requestAnimationFrame` callback because you can't
// modify descendants or attributes in the constructor itself.
_this.innerHTML = 'FOOBAR';
});
// You need to return `_this` so that any extensions to `FancyButton` will use it.
return _this;
}
FancyButton.prototype = Object.create(HTMLElement.prototype);
// The custom elements polyfill needs `X.prototype.constructor === X` to be
// true for any custom element constructor `X` so that it can figure out what
// the constructor was and look up the associated definition. This is true by
// default but the line above creates a new object without its own `constructor`
// property. i.e. Before the next line, `FancyButton.prototype.constructor`
// would return `HTMLElement`.
FancyButton.prototype.constructor = FancyButton;
// As @HendrikThePendric mentioned, this needs to be wrapped in a listener for
// the 'WebComponentsReady' event so that the loader can load the specific
// polyfills you need before you start using them.
window.addEventListener('WebComponentsReady', function() {
window.customElements.define('fancy-button', FancyButton);
});This link (a babel repl) might be helpful for seeing why the |
|
@yannickl88, were you able to clear up the issue you were running into? |
|
Sorry for the late reply, I did not yet have time to verify before. Just checked Chrome, FF, IE and edge and your example indeed works! Bit of a shame it doesn't work with the 'standard' ES5 way of defining objects. For those wondering, the full (working) example would be: <html>
<head>
<script type="text/javascript" src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script type="text/javascript" src="webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<fancy-button></fancy-button>
<script>
function FancyButton() {
var _this = HTMLElement.call(this) || this;
requestAnimationFrame(function() {
_this.innerHTML = 'FOOBAR';
});
return _this;
}
FancyButton.prototype = Object.create(HTMLElement.prototype);
FancyButton.prototype.constructor = FancyButton;
window.addEventListener('WebComponentsReady', function() {
window.customElements.define('fancy-button', FancyButton);
});
</script>
</body>
</html>Closing this since it is has been resolved as far as I am concerned. |
|
Yeah, it's a bit unusual, but it falls out of the way that ES2015 classes have to be extended in ES5 and that extensions to |
I get this odd error when using both the ES5 adapter and the loader using firefox.
My HTML file:
When loading the page no output is shown and in the console I get:
This happends in the file
webcomponents-hi-sd-ce.js:45:511(minimized).Using firefox 54.0 (64-bit) on Ubuntu 14.04.
This error does not occur in Chrome, where everything seems to work fine.
EDIT: simplified example a bit
The text was updated successfully, but these errors were encountered: