Show Menu

Polymer.js Cheat Sheet by

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.
development     javascript     web     library     framework     js     polymer     polymerjs

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
<­x-f­oo>­</x­-fo­o>
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
<­x-f­oo>­<x-­bar­></­x-b­ar>­</x­-fo­o>
Composing elements. <x­-ba­r> is part of the light dom
docu­men­t.q­uer­ySe­lec­tor­('x­-fo­o').cu­sto­mMe­tho­d();
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">
<­t­em­­pla­­te>
­<!-- shadow DOM here -->­
</t­­em­p­l­at­­e>
<sc­­ri­p­t>
P­oly­­mer­­('­t­a­g-­­nam­­e')­;
</­­scr­­ip­t­>
</­­pol­­ym­e­r­-e­­lem­­en­t>

Element lifecycle methods

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

Expres­sions

foo, foo.ba­r.baz
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

proper­tyN­ame­Changed
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">
<sc­rip­t>
Polyme­r('­g-c­ool', {
better­Cha­nged: functi­on(­inO­ldV­alue) {
},
bestCh­anged: functi­on(­inO­ldV­alue) {
}
});
</s­cri­pt>
</p­oly­mer­-el­eme­nt>

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
event
inEvent is the standard event object.
detail
inDetail: A conven­ience form of inEven­t.d­etail.
sender
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

this.$.na­meI­npu­t.value
<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
this.s­uper();
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­">
<template>{{owner}}</strong></template>
<sc­rip­t>
Polyme­r('­tk-­ele­men­t-d­ata­bin­ding', {
owner: 'Daniel',
users: [1,2,3]
});
</s­cri­pt>
</p­oly­mer­-el­eme­nt>

Download the Polymer.js Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/jonathanberi_polymer-js.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

Comments

polymerdude polymerdude, 08:31 25 Aug 15

How 'bout update to v1?

Francisco Mendez Francisco Mendez, 15:34 28 Sep 15

When do you going to update this sheets?

Pawel Pawel, 18:05 6 Feb 16

http://www.cheatography.com/pawel/cheat-sheets/polymer-1-1/?prsrc=3

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