How to create an instance of Dart Polymer custom element in Dart code?

7
votes

There is a guide on how to create Dart web-ui custom element in Dart code. There is also sample code for this technique

Is there any example on how to create a Dart Polymer custom element from Dart code? There is an issue saying that a custom element cannot be created using new Element.html(). But in web-ui there was no need to use new Element.html() at all. Even though web-ui required writing a few lines of code, but at least it worked. Is there a similar technique for creating Dart Polymer elements from Dart code?

2
dartpolymer
I think this is a known issue. code.google.com/p/dart/issues/detail?id=12089 - Tusshu
@user1848653 This is the third link in my post. That issue is about creating an instance of a custom element using Element.html constructor. I am interested if there is another alternative, similar to what could be done with web-ui (the second link in my post) - Y2i
This is not possible yet. Please star the bug to be notified when there's a way to manually insert a custom element into the page. - Seth Ladd

2 Answers

15
votes

Here is the example code:

import 'dart:html';
import 'package:polymer/polymer.dart';

main() {
  querySelector('#add-here').children.add(new Element.tag('my-element'));
}

Notice the use of new Element.tag('my-element').

1
votes

I found a neat little snippet they're using on the source code of chromedeveditor, e.g. here on Github

They use

factory ExampleUi() => new Element.tag('ExampleUi');

so that you could construct the element with:

new ExampleUi();