angular: Custom elements that extends existing elements does not upgrade in template on Chrome
I try to use a custom elements in my Angular 2 template, if my custom element extends an existing elements. It would not got upgraded. Please check my plnkr for detail.
This problem is only on Chrome because it has native support for custom elements. Latest Firefox and Safari does not have any problem as custom-elements ployfills kicks in. My investigation show that it is related to DomRenderer.prototype.createElement function. If you want to create an custom elements that extends existing element, you need to call var xFooButton = document.createElement('button', 'x-foo-button');
EDIT:
Plunker based on Angular 2.0
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 27
- Comments: 32 (11 by maintainers)
+1was deprecated in favor of “add reaction” please migrate to the new feature as soon as possible!+1
+1
I ran into this problem with my first use of Angular 2. +1
+1
+1
+1 I am facing this issue. Needs resolution.
+1 this is a huge issue.
And it is still not working in Angular, I have tested https://stackblitz.com/edit/angular-dginkc with Angular version 8.2.14 and Angular version 9.0.0-rc.7
Although it is still a workaround, but a customizable renderer helps. https://blog.nrwl.io/experiments-with-angular-renderers-c5f647d4fd9e
Angular2 2.0.0-final: http://plnkr.co/edit/mhSk6wNK3ZKMGqcwt5GG?p=preview
Please try it on both Chrome and Firefox. You will see the different.
I wild guess would be that Angular first adds the element and then later sets the
is="..."attribute, which doesn’t work. Changing theis="..."attribute after the element was added doesn’t have any effect.with
works https://plnkr.co/edit/uqq0f45foPYXSPp0WJWc?p=preview