Notes on Polymer Web Components

Jan 26, 2016

[Note: I found this blog post 5 months after I first wrote it. I didn't get around to publishing it at the time but decided I'd rather publish it now than delete it.]

These are some of my notes from reading through the Polymer documentation. I was using version 1.2.3 so things may have changed since then.

Basic structure

Example of what this looks like:

<dom-module id="element-name">

      /* CSS rules for your element */

    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->

    // element registration
      is: "element-name",

      // add properties and methods on the element's prototype

      properties: {
        // declare properties for the element's public API
        greeting: {
          type: String,
          value: "Hello!"




The ready callback is unique to Polymer. It is called after the local DOM has been created but before it has been attached to the DOM. Order of callbacks:

created -> children ready -> ready -> attached

Use the hostAttributes property in the Polymer constructor to make an element have attributes when created in HTML. I do not know what the purpose of this is. Maybe you might want to set tabindex on something so that it doesn't get focus.

Polymer.Class can be used to create a Polymer element but not register it at the same time. Not sure why this would be useful.


Local DOM