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:

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'>
   <h1>Hi world!</h1>

hello_world.dart :

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 :

    <!-- 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">

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).