Dynamically instantiate, add polymer elements dart - dart

Question

Trying to dynamically add polymer elements
on the click event not able to add the element
tried using initPolymer (resulting in stack error :element already initialized)
4 files.
item.html
<polymer-element name="init-item" >
<template>
<input type="image" src="button_minus_red.gif" on-click="{{remove}}">
{{Name}}
</template>
<script type="application/dart" src="item.dart"></script>
</polymer-element>
item.dart:
import 'package:polymer/polymer.dart';
#CustomTag('init-item')
class Item extends PolymerElement{
#observable String Name='hello';
void remove(){
Name='';
}
PlayerItem.created(): super.created(){}
}
index.dart:
import 'package:polymer/polymer.dart';
import 'item.dart'
// getting unused warning for item.dart
main() async{....
//init moved to main
initPolymer().then((_) {});
}
//adding to form element on click event
Code to run(click event)
{ //onReady added here
Polymer.onReady.then((_) { yourPlayer.children.add(new Element.tag('player-item')) ;});
}
tag added to index.html and also dynamic addition as shown above.
Due to above changes when page reloaded was automatically getting custom element included.
Removed the element form the index.html
works as expected (no Errors)
Previous error:
when used initPolymer
element added in place of tag and also within form.
on subsequent click events added within form but stack error(initialization already done)
Are there any issues due to async(highly false)? How should I approach this?

Answer 1

item is not a valid Polymer- or Custom Element name. It is a requirement that custom elements must have a dash in their name like my-item.
At the top of your question you write about a click event but the code example at the bottom shows you're doing it from main().
This two things are quite different.
If you call the code in the click handler of a Polymer element it should just work.
If you have a custom main you need to ensure Polymer is initialized properly before you instantiate elements.
See https://stackoverflow.com/a/20982658/217408 for more details.
import "package:polymer/polymer.dart";
main() {
initPolymer().then((zone) => zone.run(() {
Polymer.onReady.then((_) {
var yourPlayer = querySelector('#people');
yourPlayer.children.add(new Element.tag('player-item'));
});
}));
}