Polymer is a library for creating reusable web components. It allows developers to define custom elements with associated JavaScript behaviors to provide sophisticated user interfaces. Key features include defining local DOM, data binding with templates, declaring custom element properties, and composing elements from other elements. Properties support default values, configuration from markup, and two-way data binding for dynamic updates.
2. What is Polymer?
●The Polymer library is designed to make it easier and faster for developers to
create great, reusable components for the modern web.
●With custom elements, you can extend the vocabulary of HTML with your own
elements. Elements that provide sophisticated UI.
6. Quick tour of Polymer
● Register an element
● Add local DOM
● Compose with local DOM
● Use data binding
● Declare a property
● Bind to a property
7. Register an element
● To register a new element, call the Polymer function, which registers a new
element with the browser. Registering an element associates a tag name with a
prototype, so you can add properties and methods to your custom element.
The custom element’s name must contain a dash (-).
8. Register an element
Index.html
<html>
<head>
<script src="webcomponents-lite.min.js"></script>
<link rel="import" href="first-component.html">
</head>
<body>
<first-component></first-component>
</body>
</html>
first-component.html
<link rel="import"
href="bower_components/polymer/polymer.html">
<script>
Polymer({
is: "first-component",
ready: function() {
this.textContent = "I'm a proto-element."
}
});
</script>
9. Custom Element Lifecycle callbacks
● created instead of createdCallback
● attached instead of attachedCallback
● detached instead of detachedCallback
● attributeChanged instead of attributeChangedCallback
10. Custom Element Lifecycle callbacks
Polymer({
is: "polymer-lifecycle",
ready: function(){ },
created: function() {},
attached: function() {},
detached: function() {},
attributeChanged: function(name, type) {
console.log(this.localName + '#' + this.id + ' attribute ' + name + ' was changed to ' +
this.getAttribute(name));
}
});
created ready attached
11. Add local DOM
● Many elements include some internal DOM nodes to implement the element’s
UI and behavior. Polymer calls this local DOM, and it provides an easy way to
specify it.
● Local DOM is encapsulated inside the element.
12. Add local DOM
Index.html
<html>
<head>
<script src="webcomponents-lite.min.js"></script>
<link rel="import" href="dom-element.html">
</head>
<body>
<dom-element></dom-element>
</body>
</html>
dom-element.html
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="dom-element">
<template>
<p>I'm a DOM element. </p>
</template>
<script>
Polymer({
is: "dom-element"
});
</script>
</dom-module>
13. Compose with local DOM
● Local DOM lets you control composition. The element’s children can be
distributed so they render as if they were inserted into the local DOM tree.
14. Compose with local DOM
Index.html
<html>
<head>
<script src="webcomponents-lite.min.js"></script>
<link rel="import" href="picture-frame.html">
</head>
<body>
<picture-frame>
<img src=”image1.jpg” alt=”” />
</picture-frame>
</body>
</html>
picture-frame.html
<link rel="import" href="polymer/polymer.html">
<dom-module id="picture-frame">
<template>
<style>
div { background-color: #ccc; }
</style>
<div>
<content></content>
</div>
</template>
<script>
Polymer({ is: "picture-frame" });
</script>
</dom-module>
15. Use data binding
● Data binding is a great way to quickly propagate changes in your element and
reduce boilerplate code. You can bind properties in your component using the
“double-mustache” syntax ({{}}). The {{}} is replaced by the value of the
property referenced between the brackets.
16. Use data binding
Index.html
<html>
<head>
<script src="webcomponents-lite.min.js"></script>
<link rel="import" href="name-tag.html">
</head>
<body>
<name-tag></name-tag>
</body>
</html>
name-tag.html
<link rel="import" href="polymer.html">
<dom-module id="name-tag">
<template>
This is <b>{{owner}}</b>'s name-tag element.
</template>
<script>
Polymer({
is: "name-tag",
ready: function() {
this.owner = "Daniel";
} });
</script>
</dom-module>
17. Declare a property
● Properties are an important part of an element’s public API. Polymer declared
properties support a number of common patterns for properties — setting
default values, configuring properties from markup, observing property
changes, and more..
19. Bind to a property
● In addition to text content, you can bind to an element’s properties (using
property-name="{{binding}}"). Polymer properties can optionally support
two-way binding.
●This example uses two-way binding: binding the value of a custom input
element (iron-input) to the element’s owner property, so it’s updated as the user
types
20. Bind to a property
Index.html
<html>
<head>
<script src="webcomponents-lite.min.js"></script>
<link rel="import" href="editable-name-tag.html">
</head>
<body>
<editable-name-tag></editable-name-tag>
</body>
</html>
editable-name-tag.html
<link rel="import" href="polymer.html">
<link rel="import" href="iron-input/iron-input.html">
<dom-module id="editable-name-tag">
<template>
This is a <strong>{{owner}}</strong>'s editable-name-tag.
<input is="iron-input" bind-value="{{owner}}"/>
</template>
<script>
Polymer({
is: "editable-name-tag",
properties: {
owner: {
type: String,
value: "Daniel"
} } });
</script>
</dom-module>
21. Reference
Polymer 1.0 - https://www.polymer-project.org/1.0/docs/
Shadow - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Shadow
Html Import - http://www.html5rocks.com/en/tutorials/webcomponents/imports/
Custom Elements - http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
