custom element throws Failed to construct HTMLElement error #818
Comments
|
Yeah, this is one of the rough edges of web components. Basically a custom element must be a class that extends |
|
I removed angular and SystemJS from the application, compiled to I have pushed the changes to the reproduction repo. |
|
It looks like you still have the |
|
Commented it out - now I don't get the error but don't see the custom tag output either :). Let me debug it a bit and I'll come back. Thanks for such a prompt attention. And I haven't mentioned it so far - thank you a ton for svelte and bringing in post-framework paradigm! |
|
Alright, some more information - here are the changes I made -
Now the generated With these changes I don't get the exception anymore but the custom tag is not rendered at all. The host application is a purely static html application that uses <!DOCTYPE html>
<html>
<head>
<base href="." />
<title>Svelte custom elements</title>
<link rel="stylesheet" href="style.css" />
<script src="./svelte/bundle.js"></script>
</head>
<body>
<my-thing></my-thing>
</body>
</html>This application doesn't import anything from From what I can see, it seems that the customElements.define('my-thing', MyThing);
assign( MyThing.prototype, proto , {
_mount(target, anchor) {
this._fragment.mount(this.shadowRoot, null);
target.insertBefore(this, anchor);
},
_unmount() {
this.parentNode.removeChild(this);
}
});
return MyThing; |
|
Sorry for the delayed follow-up — I think this is the same as #821. Could you try installing the latest version of Svelte and seeing if it's fixed please? |
|
It worked like a charm. I haven't used anything as simple and clean as Svelte in a long time after years of framework fatigue. Thank you for that :). |
Problem statement
I'm trying to use a svelte custom element in an angular app through SystemJS but I'm getting following error -
Error in console
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at new MyThing (:5000/svelte/bundle.js:208) at HTMLDocument.createElement (:1:1545)Versions
Svelte - latest through degit (
degit sveltejs/template my-app)Browsers - Latest Chrome and Opera
Reproduction
https://github.com/ospatil/svelte-custom-elem-bug
Setup instructions are on the README.md of the repo.
Analysis
Basically, the error is being thrown from the following line in the generated
bundle.js-HTMLElement.call(this);I googled and found a few SO links like this where people have faced the same error when working with polymer custom elements in an
es5application - https://stackoverflow.com/questions/39037489/extending-htmlelement-constructor-fails-when-webpack-was-usedI tried adding shim as suggested in the post above, but no luck. In fact it also broke other StencilJS based custom elements on the page.
I tried
es,cjsandumdformats inrollupconfig, but that doesn't seem to have any positive effect.Note - It's entirely possible that this could turn out to be incorrect usage on my part. I hope this issue then serves as an example of 'how not to use this feature' for others 😃.
The text was updated successfully, but these errors were encountered: