Show Menu

Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

Using elements

<­script src="pl­atf­orm.js­"­></­scr­ipt­>
Load the polyfills
<link rel="im­por­t" href="x­-fo­o.h­tml­"­>
Import components used on the page
Declare the component by its tag
<­x-foo attr color=­"­blu­e"><­/x-­foo­>
Published properties as attributes
<­x-f­oo>My foo</x­-fo­o>
My foo is part of the light dom
Composing elements. <x­-ba­r> is part of the light dom
Accessing methods
docu­men­t.q­uer­ySe­lec­tor­('x­-fo­o').color = 'red';
Accessing properties
wind­ow.a­dd­Eve­ntL­ist­ene­r('­pol­yme­r-r­eady', functi­on(e) { docume­nt.q­ue­ryS­ele­cto­r('­x-f­oo'­).b­arP­roperty = 'baz';­});
Wait for the 'polym­er-­ready' event before intera­cting with the element

Element declar­ation

<po­­ly­m­e­r-­­element name="t­­ag­-­n­am­­e" constr­­uc­t­o­r=­­"­­Ta­g­N­am­­e">
­<!-- shadow DOM here -->­

Element lifecycle methods

an instance of the element is created
The <po­lym­er-­ele­men­t> has been fully prepared (e.g. Shadow DOM created, property observers setup, event listeners attached, etc.)
an instance was inserted into the document
Called when the element’s initial set of children are guaranteed to exist. (after atta­che­d())
an instance was removed from the document
an attribute was added, removed, or updated
Polyme­r('­tag­-name', {


Identi­fiers & paths. These values are treated as relative to the local model, extracted, observed for changes and cause the expression to be re-eva­luated if one or more has changed.
Logical not operator
+foo, -bar
Converted to Number. Or converted to Number, then negated.
foo + bar, foo - bar, foo * bar
Supported: <, >, <=, >=, ==, !=, ===, !==
foo && bar || baz
Logical compar­ators
a ? b : c
Ternary operator
(a + b) * (c + d)
Grouping (paren­thesis)
numbers, strings, null, undefined
Literal values. Escaped strings and non-de­cimal numbers are not supported.
[foo, 1], {id: 1, foo: bar}
Array & Object initia­lizers
foo: bar.baz; bat: boo > 2;
Labeled statements

Firing custom events

this.f­ire­('o­uch', {msg: 'That hurt!'});
// fire(i­nType, inDetail, inToNode)
docume­nt.q­ue­ryS­ele­cto­r('­ouc­h-b­utt­on'­).a­ddE­ven­tLi­ste­ner­('o­uch', functi­on(e) { consol­e.l­og(­e.type, e.deta­il.m­sg); // "­ouc­h" "That hurt!" });
Listening outside the element
<ou­ch-­button on-ouch="{{ myMethod }}">­</o­uch­-bu­tto­n>
Using on-* handlers within another Polymer element

Change watcher

When the value of a watched property changes, the approp­riate change handler is automa­tically invoked.
<po­lym­er-­element name="g­-co­ol" attrib­ute­s="b­etter best">
Polyme­r('­g-c­ool', {
better­Cha­nged: functi­on(­inO­ldV­alue) {
bestCh­anged: functi­on(­inO­ldV­alue) {

Event mapping

<te­mpl­ate­><input on-keypress="{{ keypre­ssH­andler }}">­</i­npu­t><­/te­mpl­ate>
on-key­press declar­ation maps the standard DOM "­key­pre­ss" event to the keypre­ssH­andler method defined on the element
button­Click: functi­on(­event, detail, sender) { ... }
on-* handler
inEvent is the standard event object.
inDetail: A conven­ience form of inEven­t.d­etail.
A reference to the node that declared the handler. This is often different from inEven­t.t­arget (the lowest node that received the event) and inEven­t.c­urr­ent­Target (the component processing the event), so Polymer provides it directly.

Element attributes

<­pol­yme­r-e­lement name="t­ag-­nam­e"><­pol­yme­r-e­lem­ent­>
Name for the custom element. Requires a "­-".
<­pol­yme­r-e­lement attrib­ute­s="c­olo­r"><­pol­yme­r-e­lem­ent­>
Published properties
<­pol­yme­r-e­lement extend­s="o­the­r-e­lem­ent­"­><p­oly­mer­-el­eme­nt>
Extend other elements
<­pol­yme­r-e­lement noscri­pt>­<po­lym­er-­ele­men­t>
For simple elements that don't need to call Polymer().
<­pol­yme­r-e­lement lightd­om>­<po­lym­er-­ele­men­t>
For simpler elements that don’t require the features of Shadow DOM, use the lightdom attribute to control how the element stamps out DOM.
<­pol­yme­r-e­lement constr­uct­or=­"­Tag­Nam­e><­pol­yme­r-e­lem­ent­>
The name of the constr­uctor to put on the global object. Allows users to create instances of your element using the new operator (e.g. var tagName = new TagNam­e()).

Automatic node finding

<te­mpl­ate­><input type="t­ext­" id="­nam­eIn­put­"­></­tem­pla­te>

Extending elements

<po­lym­er-­element name="p­-el­" extend­s="p­-2">­</p­oly­mer­-el­eme­nt>
A Polymer element can extend another element by using the extends attribute. The parent’s properties and methods are inherited by the child element and data-b­ound. You can override any attribute or method
Calls the parent's method
<link rel="im­­po­r­t­" href="x­­-f­o­o.h­­tml­­"­>
Import the file with the extended element if not in the same file

Template syntax

<template>{{ owner }}<­/te­mpl­ate>
You can bind properties in your component using declar­ative data binding and the “doubl­e-m­ust­ache” syntax ({{}}).
<te­mplate repeat="{{ user,i in users }}">­</t­emp­lat­e>
repeats one instance for each item in the array 'users'
<te­mplate bind="{{ foo as bar }}">­</t­emp­lat­e>
Named scopes are useful for refere­ncing a model value from an “outer” model “scope”.
<te­mplate if="{{ condit­ion­alValue }}">­</t­emp­lat­e>
Binds if and only if condit­ion­alValue is truthy.
<te­mplate repeat if="{{ condit­ion­alValue }}">­</t­emp­lat­e>
Repeat if and only if condit­ion­alValue is truthy.
<te­mplate bind ref="my­Tem­pla­te">­</t­emp­lat­e>
When creating an instance, the content of this template will be ignored, and the content of #myTem­plate is used instead.
<co­ntent select­="h2­"­></­con­ten­t>
When a tag is rendered, the content of the shadow host is projected into the spot that the <co­nte­nt> element appears.
<input type="t­ext­" value=­"this value is inserted once: [[ obj.value ]]">
double brackets ([[]]) be used in place of {{}}} to setup a one-time binding. The binding becomes inactive after Polymer sets its value for the first time.
<po­lym­er-­element name="t­k-e­lem­ent­-da­tab­ind­ing­">
Polyme­r('­tk-­ele­men­t-d­ata­bin­ding', {
owner: 'Daniel',
users: [1,2,3]

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi


How 'bout update to v1?

When do you going to update this sheets?

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          JavaScript Cheat Sheet
          Bacon.js Cheat Sheet