Tutorial by Examples

Docs: 1.x -> 2.x upgrade guide, registering an element, shared style modules. <link rel="import" href="bower_components/polymer/polymer-element.html"> <dom-module id="element-name"> <template> <!-- Use one of these style declaration...

Docs: extending elements, inherited templates. Instead of Polymer.Element, a custom element can extend a different element: class ParentElement extends Polymer.Element { /* ... */ } class ChildElement extends ParentElement { /* ... */ } To change or add to the parent's template, over...

Docs: mixins, hybrid elements. Defining a class expression mixin to share implementation between different elements: <script> MyMixin = function(superClass) { return class extends superClass { // Code that you want common to elements. // If you're going to override a...

Docs: lifecycle callbacks, ready. class MyElement extends Polymer.Element { constructor() { super(); /* ... */ } ready() { super.ready(); /* ... */ } connectedCallback() { super.connectedCallback(); /* ... */ } disconnectedCallback() { super.disconnectedCallback(); /* ... */ } attribut...

Docs: data binding, attribute binding, binding to array items, computed bindings. Don't forget: Polymer camel-cases properties, so if in JavaScript you use myProperty, in HTML you would use my-property. One way binding: when myProperty changes, theirProperty gets updated: <some-element t...

Docs: observers, multi-property observers, observing array mutations, adding observers dynamically. Adding an observer in the properties block lets you observe changes in the value of a property: static get properties() { return { myProperty: { observer: '_myPropertyChanged' ...