Dynamically create polymer element

4
votes

I have defined login element as follows:

<polymer-element name="my-login" extends="form">
  <template> ...</template>

and dart class as follows:

@CustomTag('my-login')
  class MyLogin extends PolymerElement { .... }

In the main application component, I am trying to create my-login as follows:

 MyLogin p =  new Element.tag("my-login", "FormElement");

This generates exception:

Exception: type 'HtmlElement' is not a subtype of type 'MyLogin' of 'p'.

The code works if "extends=form" is removed from polymer-element declaration :

 <polymer-element name="my-login">

and created as follows:

MyLogin p =  new Element.tag("my-login");

How to dynamically create custom element that extends other HTML element?

2
dartdart-polymer

2 Answers

6
votes

You should instantiate it as

Element y = new Element.tag('form', 'my-login');

What seems not to work is

MyLogin y = new Element.tag('form', 'my-login');

this should result in the HTML for the inserted element

<form is="my-login"></form>
3
votes
factory MyLogin() => document.createElement("form", "my-login");

Then you can just call:

MyLogin login = new MyLogin();

This works for me.