Programmatically create special Polymer-Element


I have got a polymer-element with following html:

<polymer-element name="tab-bar">
    <template repeat="{{item in items}}">
      <div>This element is {{ item }}</div>
  <script type="application/dart" src="tab_bar.dart"></script>

The underlying dart class looks as follows:

import 'package:polymer/polymer.dart';

class TabBar extends PolymerElement {
  List items;

  TabBar(List<String> items) {
    this.items = toObservable(items);

With the following approach, it isn’t possible to programmatically add the element:

query('body').children.add(createElement(new TabBar(['One','Two','Three'])));

So now, how can I add such a polymer element programatically and also set the list in the constructor?


As of polymer 0.8.5 you can use constructor like

new Element.tag('tag-bar');

also, no more .xtag and no more .host (host == this now)

credits go to Seth Ladd who explained this on polymer mailing list

Answered By – tomaszkubacki

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *