How to build a polymer component

How to build a component

In this tutorial we will see how to build a simple component using Dart and Polymerize.

The component

To create a new component you only need to extend PolymerElement and annotate it with @PolymerRegister(), like this:

@PolymerRegister('hello-world')
abstract class MyComp extends PolymerElement {
  static String get template => "<h1>Hi world!</h1>";
}

You can provide a template using a static getter template like in this example. Or you can put it in a separate file using dom-module tag:

hello_world.html :

<dom-module id='hello-world'>
 <template>
   <h1>Hi world!</h1>
 </template>
</dom-module>

hello_world.dart :

@PolymerRegister('hello-world',template:'hello_world.html')
abstract class MyComp extends PolymerElement {
}

Project structure

A polymerize project structure does not differ from that of a standard dart web project:

The index.html file should import the necessary polyfills and polymer and then the module .html file. Every package of your project generates a <package_name>.mod.html file that one should include in the index.html to load the application. The <package_name> is the one specified in the pubspec.yaml file.

For example if the <package_name> for the example above was my_sample_app, then the index.html should be :

<html>
<head>
    <!-- loads polyfills if needed -->
    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <!-- module loader -->
    <link rel='import' href='imd.html'>
    <!-- load main component -->
    <link rel='import' href="my_sample_app.mod.html" rel="import">
</head>
<body>
  <hello-world></hello-world>
</body>
</html>

You only need to directly import only the main component file in the index.html because all the dependencies for a module will be automatically downloaded for you by the modular system (imd.html).