Polymer 1.1 Cheat Sheet

**// 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>**