Show Menu
Cheatography

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
<­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>
                           
 

Comments

How 'bout update to v1?

When do you going to update this sheets?

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