Polymer 1.1 Cheat Sheet by Pawel

// Register element 'my-element' and return constructor
var elementConstr = Polymer({is: 'my-element'})

// Register element 'my-element' with factory implementation
var elementConstr = Polymer(
{ is: 'my-element',
  factoryImpl: function (v1, v2) {
    this.v1 = v1;
    this.v2 = v2
}});

// Create element
var myElement = new elementConstr();
OR
var myElement = document.createElement('my-element');

Create element with factory implementation
var myElement = new elementConstr(1, 2);

// Extend existing input element
var myElement = Polymer({
   is: 'my-input',
   extends: 'input'
});

my-behavior.html
<script>
myBehavior = {
    listeners: {'click' : 'changeColor'},
    changeColor: function () {
       this.color = 'blue';    
     }
}
</script>
my-element.html
<link rel="import" href="my-behavior.html">
Polymer({
  is: 'my-element',
  behaviors: [myBehavior]
});

 Polymer({
        is: 'my-element',
        properties: {
            color: String,
            arr: {
                type: Array,
                value: function () {return [];}
            },
            obj: {
                type: Object
            }
        },
        observers: [
    'obs1(obj.prop2)', 'obj2(color)',
    'obs3(obj.prop2, color)', //Observe mupliple
    'obs4(obj.*) //Observe deep,
    'obs5(arr.splices) //Observe array splices
        ]});

Polymer({
  is: 'my-element',
  properties: {
    prop1: String,
    prop2: String
  },
  observers: ['doSomething(prop1, prop2)'],
  doSomething: function () {
    this.debounce('doSomething', function () {
      console.log('called once...');
    }, 300);
  }
});

style.html
<dom-module id="my-style">
    <template>
        <style>
            :host {
                --text-style: blue;
            }
        </style>
    </template>
</dom-module>

my-element.html
<link rel="import" href="style.html">
<dom-module id="my-element">
    <style include="my-style"></style>
</dom-module>

<style is="custom-style">

        my-element {
            --text-style: red;
        }

</style>

<template is="dom-repeat" items={{table}} as="myTable">
<div>{{myTable.item}}</div>
</template>
...
Polymer ({ ...
     ready: function () {this.table = [{item: 'item1'}, {item: 'item2'}];}
...});

<template is="dom-repeat" items={{table}} filler="myFilter" sort="mySort">
<div>{{table.item}}</div>
</template>
...
Polymer ({ ...
     ready: function () {this.table = [{item: 'item1'}, {item: 'item2'}];},
     myFilter: function (item) {...},
     mySort: function (item) {...}
...});

<link rel="import" href="oldbehavior.html">
<script>
  NewBehaviorImpl = {
  }
  NewBehavior = [ OldBehavior, NewBehaviorImpl ]
</script>

// Add event listeners as a element prototype property
<dom-module id="my-element">
<template>
    <div id="elementID1">Element 1</div>
    <div id="elementID2">Element 1</div>
</template>
</dom-module>
{
   Polymer({
    is: 'my-element',
    listeners: {
       'click.elementID1' : 'handleClick1',
       'click.elementID2' : 'handleClick2'
       'click' : 'handleClick' // Every click
});

// Adding event listeners on elements
<element on-{event name} = "{handler}"></element>

this._observer = Polymer.dom(this).
      observeNodes(function (info) {
                console.log ('Added nodes: ' + info.addedNodes);
                console.log ('Removed nodes: '+ info.removedNodes);
});

Polymer.dom(this).unobserveNodes(this._observer)

<template is="dom-if" if="{{user.isAdmin}}">
      Only admins can see this.
</template>