Polymer.js
Cheat Sheet
30 |
31 |
32 |
33 |
335 |
336 |
337 |
34 |
69 |
70 |
71 | Polymer element interface
35 | 36 | Load platform.js on main page 37 |<script src="platform.min.js"></script>
38 |
39 | Import polymer.html into custom elements
40 | <link rel="import" href="bower_components/polymer/polymer.html">
41 |
42 | Import custom element
43 | <link rel="import" href="x-foo.html">
44 |
45 | Contruct instance of custom element
46 | <x-foo></x-foo>
47 |
48 | Publish properties as attributes
49 | <x-foo attr color="blue"></x-foo>
50 |
51 | My foo is the light dom
52 | <x-foo>My foo</x-foo>
53 |
54 | Nested elements
55 | <x-foo><x-bar></x-bar></x-foo>
56 |
57 | Accessing published methods
58 | document.querySelector('x-foo').customMethod();
59 |
60 | Accessing published property
61 | document.querySelector('x-foo').color = 'red';
62 |
63 | Wait for WebComponentsReady before accessing elements
64 | window.addEventListener('WebComponentsReady', function(e) {
65 | document.querySelector('x-foo').barProperty = 'baz';
66 | });
67 |
68 |
72 |
126 |
127 | Element registration
73 | 74 | Declaratively 75 |
76 | <polymer-element name="tag-name" class="active" mycustomattr>
77 | <template>...</template>
78 | <script>Polymer('tag-name');</script>
79 | </polymer-element>
80 |
81 |
82 | Script referenced inside
83 |
84 | <polymer-element name="tag-name">
85 | <template>...</template>
86 | <script src="path/to/tagname.js"></script>
87 | </polymer-element>
88 |
89 |
90 | Script referenced outside
91 |
92 | <script src="path/to/tagname.js"></script>
93 | <polymer-element name="tag-name">
94 | <template>...</template>
95 | </polymer-element>
96 |
97 |
98 | No script
99 |
100 | <polymer-element name="tag-name" constructor="TagName" noscript>
101 | <template>
102 | <!-- shadow DOM here -->
103 | </template>
104 | </polymer-element>
105 |
106 |
107 | Pure JavaScript
108 |
109 | <script>
110 | Polymer('name-tag', {nameColor: 'red'});
111 |
112 | var el = document.createElement('div');
113 |
114 | el.innerHTML = '\
115 | <polymer-element name="name-tag" attributes="name">\
116 | <template>\
117 | Hello <span style="color:{{nameColor}}">{{name}}</span>\
118 | </template>\
119 | </polymer-element>';
120 |
121 | // Insert into DOM for polyfill to see it
122 | document.body.appendChild(el);
123 | </script>
124 |
125 |
128 |
145 |
146 | Element lifecycle methods
129 | 130 | Instance created 131 |created()
132 |
133 | Fully prepared (e.g. Shadow DOM, observers, event listeners, etc.)
134 | ready()
135 |
136 | Instance was inserted
137 | attached()
138 |
139 | Instance was removed
140 | detached()
141 |
142 | Attribute was added, removed, or updated
143 | attributeChanged()
144 |
147 |
179 |
180 | Expressions
148 | 149 | Identifiers & paths. These values are treated as relative to the local model, extracted, observed for changes and cause the expression to be re-evaluated if one or more has changed. 150 |foo, foo.bar.baz
151 |
152 | Logical not operator
153 | !
154 |
155 | Converted to Number. Or converted to Number, then negated.
156 | +foo, -bar
157 |
158 | Supported: <, >, <=, >=, ==, !=, ===, !==
159 | foo + bar, foo - bar, foo * bar
160 |
161 | Logical comparators
162 | foo && bar || baz
163 |
164 | Ternary operator
165 | a ? b : c
166 |
167 | Grouping (parenthesis)
168 | (a + b) * (c + d)
169 |
170 | Literal values. Escaped strings and non-decimal numbers are not supported.
171 | numbers, strings, null, undefined
172 |
173 | Array & Object initializers
174 | [foo, 1], {id: 1, foo: bar}
175 |
176 | Labeled statements
177 | foo: bar.baz; bat: boo > 2;
178 |
181 |
199 |
200 | Filters
182 | 183 | Filter syntax 184 |{{ {...} | filterName }}
185 |
186 | tokenList allows you to dynamically set/remove class names based on the object passed to it. If the object key is truthy, the name will be applied as a class.
187 | <div class="{{ {active: user.selected, big: user.type == 'super'} | tokenList }}">
188 |
189 | styleObjectallows you to bind to an object
190 |
191 |
192 | <div style="{{styles | styleObject}}">...</div>
193 |
194 | <!-- The literal case also works, but is purely stylistic. -->
195 | <div style="{{ {background: color} | styleObject }}">{{color}}</div>
196 |
197 |
198 |
201 |
212 |
213 | Firing custom events
202 | 203 | fire(inType, inDetail, inToNode) 204 |this.fire('ouch', {msg: 'That hurt!'});
205 |
206 | Listening outside the element
207 | document.querySelector('ouch-button').addEventListener('ouch', function(e) { console.log(e.type, e.detail.msg); // "ouch" "That hurt!" });
208 |
209 | Using on-* handlers within another Polymer element
210 | <ouch-button on-ouch="{{ myMethod }}"></ouch-button>
211 |
214 |
231 |
232 | Change watcher
215 | 216 | When the value of a watched property changes, the appropriate change handler is automatically invoked. 217 | 218 |propertyNameChanged
219 |
220 | <polymer-element name="g-cool" attributes="better best">
221 | <script>
222 | Polymer('g-cool', {
223 | betterChanged: function(inOldValue) {
224 | },
225 | bestChanged: function(inOldValue) {
226 | }
227 | });
228 | </script>
229 |
230 |
233 |
250 |
251 | Event Mapping
234 | 235 | on-keypress declaration maps the standard DOM "keypress" event to the keypressHandler method defined on the element 236 |<template><input on-keypress="{{ keypressHandler }}"></input></template>
237 |
238 | on-* handler
239 | buttonClick: function(event, detail, sender) { ... }
240 |
241 | inEvent is the standard event object.
242 | event
243 |
244 | inDetail: A convenience form of inEvent.detail.
245 | detail
246 |
247 | A reference to the node that declared the handler. This is often different from inEvent.target (the lowest node that received the event) and inEvent.currentTarget (the component processing the event), so Polymer provides it directly.
248 | sender
249 |
252 |
273 |
274 | Element attributes
253 | 254 | Name for the custom element. Requires a "-". 255 |<polymer-element name="tag-name"><polymer-element>
256 |
257 | Published properties
258 | <polymer-element attributes="color"><polymer-element>
259 |
260 | Extend other elements
261 | <polymer-element extends="other-element"><polymer-element>
262 |
263 | For simple elements that don't need to call Polymer().
264 | <polymer-element noscript><polymer-element>
265 |
266 | For simpler elements that don’t require the features of Shadow DOM, use the lightdom attribute to control how the element stamps out DOM.
267 |
268 | <polymer-element lightdom><polymer-element>
269 |
270 | The name of the constructor to put on the global object. Allows users to create instances of your element using the new operator (e.g. var tagName = new TagName()).
271 | <polymer-element constructor="TagName><polymer-element>
272 |
275 |
280 |
281 | Automatic node finding
276 | 277 | <template><input type="text" id="nameInput"></template> 278 |this.$.nameInput.value
279 |
282 |
293 |
294 | Extending elements
283 | 284 | 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-bound. You can override any attribute or method 285 |<polymer-element name="p-el" extends="p-2"></polymer-element>
286 |
287 | Calls the parent's method
288 | this.super();
289 |
290 | Import the file with the extended element if not in the same file
291 | <link rel="import" href="x-foo.html">
292 |
295 |
332 |
333 |
334 | Template syntax
296 | 297 | You can bind properties in your component using declarative data binding and the “double-mustache” syntax ({{}}). 298 |<template>{{ owner }}</template>
299 |
300 | repeats one instance for each item in the array 'users'
301 | <template repeat="{{ user in users }}"></template>
302 |
303 | Named scopes are useful for referencing a model value from an “outer” model “scope”.
304 | <template bind="{{ foo as foo }}"></template>
305 |
306 | Binds if and only if conditionalValue is truthy.
307 | <template if="{{ conditionalValue }}"></template>
308 |
309 | Repeat if and only if conditionalValue is truthy.
310 | <template repeat if="{{ conditionalValue }}"></template>
311 |
312 | When creating an instance, the content of this template will be ignored, and the content of #myTemplate is used instead.
313 | <template bind ref="myTemplate"></template>
314 |
315 | When a tag is rendered, the content of the shadow host is projected into the spot that the <content> element appears.
316 | <content select="h2"></content>
317 |
318 | 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.
319 | <input type="text" value="this value is inserted once: [[ obj.value ]]">
320 |
321 |
322 | <polymer-element name="tk-element-databinding">
323 | <template>{{owner}}</strong></template>
324 | <script>
325 | Polymer('tk-element-databinding', {
326 | owner: 'Daniel',
327 | users: [1,2,3]
328 | });
329 | </script>
330 | </polymer-element>
331 |