Paper Elements only creates HtmlElements in Dart

Issue

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.

Solution

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.

Answered By – Günter Zöchbauer

Answer Checked By – Marilyn (FlutterFixes Volunteer)