Paper Elements only creates HtmlElements in Dart

Question

I have a simple component that contains a list of employees defined as following:

@Component(selector: 'employee-list', templateUrl:
    'employee_list.html', cssUrl: 'employee_list.css')
class EmployeeListComponent extends ShadowRootAware {
...
}

I would like to use a PaperFab element in my code, as an action button and would like to alter it on the fly (e.g. change the icon).

There is a link to the element definition in the HTML:

<link rel="import" href="packages/paper_elements/paper_fab.html">

Creating the element programmatically:

var fab = new PaperFab(); 
print(fab is PaperFab) // false

or

var fab = new Element.tag('paper-fab') as PaperFab;
// Casts error: type 'HtmlElement' is not a subtype of type 
//    'PaperFab' in type cast.

The same happens when selecting the element through the

var fab = _shadowRoot.querySelection("#fabButton");
print(fab is PaperFab) // false

Is it possible to access paper elements from a custom element? Or should you use the innerHTML instead, which could work but breaks the component idea.

score 1 · Accepted Answer · edited May 23 '17 at 11:50

I assume your Polymer initialization is missing. See https://stackoverflow.com/a/20982658/217408 for more details.

You need to ensure Polymer is initialized properly before you can create elements by running your code from within zone.run(() {... } or initPolymer().run(() { ... } or one of the Polymer life-cycle callbacks. If you initialize Angular in run you can create Polymer elements everywhere in Angular code as well.

This is the default way to create instances or Polymer elements imperatively

var fab = new Element.tag('paper-fab') as PaperFab;

but the core- and paper-elements have got a factory constructor which allows them to be instantiated using new as well

new PaperFab();

If you build your own Polymer element you need to add a factory constructor yourself to be able to create new instances using new. See https://stackoverflow.com/a/27616062/217408 for more details.

Thank you. This is indeed part of the solution. Requires a few addition in combination with AngularDart. — Wieki, Apr 09 '15 at 13:45

score 1 · Answer 2 · edited Apr 09 '15 at 13:46

In addition to Günter's answer:

In the main.dart the construction is now as follows to combine it with AngularDart:

void main() {
  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) {
      Logger.root
        ..level = Level.FINEST
        ..onRecord.listen((LogRecord r) {
          print(r.message);
        });

      applicationFactory().addModule(new MyAppModule()).run();
    });
  }));
}

And to resolve any problems with the smoke library add the polymer transformer to the pubspec.yaml:

transformers:
- angular:
    html_files:
    ...
- polymer:
    entry_points: web/index.html

Paper Elements only creates HtmlElements in Dart

2 Answers2