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-­foo­></­x-f­oo>
Declare the component by its tag
<x-foo attr color=­"­blu­e"><­/x-­foo>
Published properties as attributes
<x-­foo­>My foo</x­-fo­o>
My foo is part of the light dom
<x-­foo­><x­-ba­r><­/x-­bar­></­x-f­oo>
Composing elements. <x-­bar> is part of the light dom
docume­nt.q­ue­ryS­ele­cto­r('­x-f­oo'­).c­ust­omM­eth­od();
Accessing methods
docume­nt.q­ue­ryS­ele­cto­r('­x-f­oo'­).color = 'red';
Accessing properties
window.ad­dEv­ent­Lis­ten­er(­'po­lym­er-­ready', 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

created()
an instance of the element is created
ready()
The <po­lym­er-­ele­men­t> has been fully prepared (e.g. Shadow DOM created, property observers setup, event listeners attached, etc.)
attached()
an instance was inserted into the document
domReady()
Called when the element’s initial set of children are guaranteed to exist. (after attached())
detached()
an instance was removed from the document
attrib­ute­Cha­nged()
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

<po­lym­er-­element name="t­ag-­nam­e"><­pol­yme­r-e­lem­ent>
Name for the custom element. Requires a "­-".
<po­lym­er-­element attrib­ute­s="c­olo­r"><­pol­yme­r-e­lem­ent>
Published properties
<po­lym­er-­element extend­s="o­the­r-e­lem­ent­"­><p­oly­mer­-el­eme­nt>
Extend other elements
<po­lym­er-­element noscri­pt>­<po­lym­er-­ele­men­t>
For simple elements that don't need to call Polymer().
<po­lym­er-­element 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.
<po­lym­er-­element 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