-
Notifications
You must be signed in to change notification settings - Fork 12.6k
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
Extending HTMLElement still not working #12949
Comments
Is it fine to change the compiler to target `es2015? |
I get this error if I specifically try to |
Perhaps @robdodson & the polymer team can shed some light on the matter |
ah I think you're running into this issue https://github.com/webcomponents/custom-elements#known-issues |
Yes, I suspected this is the issue. It's really unfortunate that something like For others running into this issue, I suggest using the shim that @robdodson linked to - thanks for the response Rob! |
The shim does mostly work but unfortunately has issues with elements that extend other custom elements. For example class A extends HTMLElement {
}
new A(); works fine however class A extends HTMLElement {
}
class B extend A {
}
new B(); does not. (unless class A is abstract) Perhaps remove the reference to custom elements from the What's New document to avoid confusion especially as TypeScript doesn't even recognise the |
@ZanderBrown would you mind opening an issue on the custom elements polyfill? just off the top of my head... did you remember to call super() in your constructors? |
Edit Much exploration later it was my fault i wasn't actually registering the new element (class B) To make this easier for other developers i have created a TypeScript decorator export function CustomElement(name: string) {
return function(target: any) {
customElements.define(name, target);
}
} Used as follows @CustomElement("my-element")
export abstract class MyElement extends HTMLElement {
// Whatever code
} |
Because custom elements basically require classes, I would recommend distributing ES6 to browsers that super it and only ship ES5 to older browsers. The shim is mostly for situations where you have a static server and incurs a performance penalty on browsers with native custom elements. |
@DanielRosenwasser Reflect.construct doesn't since the issue, and I don't recommend using it to work around this issue. It's not a replacement for super() because it always allocates a new instance. Performance is very bad sometimes. |
I'm still having issues with the shim: I'm compiling the following to ES5:
And I get this error:
|
Odd it's worked fine for me in quite a few projects now |
I also get that error.
|
have you used the shim? |
Do we have any other options, or are there any plans to make this work better for transpilation to ES5? This is going to hinder custom element adoption, at least in my case. I use TypeScript for all of my major projects, and once Polymer 2 is stable I'm not sure this is going to play out well. @ZanderBrown Did you open an issue in the custom elements polyfill? I'd like to follow it. |
We know about this issue for the polyfill, which is why we wrote the native-shim, which is now shipped as the We did have a race condition with the polyfill loader and native HTML imports that was causing this error to still occasionally occur, but that should be fixed by always including the adapter when serving compiled code. |
@justinfagnani I'm getting this when loading a basic Polymer 2 class transpiled with TypeScript:
|
@lastmjs are you using the custom elements ES5 adapter? If not, that's expected. |
Yes I am using it. The error is coming from the adapter I believe. |
Oh yes, sorry didn't look at the stack trace closely enough. To use the adapter you need to compile the whole application. You can't mix ES6 and ES5 style classes. |
All of the code that I supply is transpiled, and all I am including is |
Let me get an example |
I'm transpiling everything that I own, and I'm still getting this error:
HTML:
TS source code:
Transpiled TS:
|
Wait a minute...is the Polymer project not transpiled to ES5? I'm seeing classes in the distribution code. |
It's not just the code you own, you have to transpile everything. The Polymer CLI does this for you: build complies anything imported, and serve compiles and JS requested. |
No, Polymer is not compiled, because custom elements require ES6 classes. You have to distribute ES6 and compile everything at the app level if necessary for the environment. |
I don't use the Polymer CLI. I'm trying to leverage HTTP/2 as much as possible, so I don't do bundling. Isn't this going to be problematic? I don't think we should expect everyone to use the Polymer CLI tools and compile everything into one HTML file. What if people want to use their own build system, webpack, rollup, etc? |
I understand your last point, but is there a problem with |
You don't have to use the CLI, it just makes this part automatic. The key is that native custom elements require ES6 classes, so we distribute ES6. In the case that you want to ship compiled code to browsers that support custom elements, we provide the adapter to make ES5 work, but you need to compile all custom elements because the adapter calls constructors without new. Sorry for the complications, but we've really, really tried to make this work. |
We can't ship Polymer pre-compiled because that would work without that adapter. |
Thanks for the explanation, I appreciate it. I'll figure something out :) |
Of course. For reference, what our build system does is follow all imports to find every file and compile if necessary. You can use the polymer-build library to get gulp streams of all dependencies to process on your own. |
So I'm going to say that neither standard custom elements, nor Polymer 2 work w/ IE 11, without a very complex build process. |
This is another case that would be fixed (or at least significantly improved) by #15397 |
TypeScript Version: 2.1.4
Code
So the following JS works fine in Chrome (v55)
Which of course can be represented with the following TypeScript:
Except the compiled typescript won't run
tsc Output
In Chrome's console i see:
The text was updated successfully, but these errors were encountered: