Polymer

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.

Web Component
●HTML Template
●Custom Element
●Shadow DOM
●HTML Import

Installing with Bower
Project setup
> bower init
> bower install --save Polymer
> bower update

Quick tour of Polymer
● Register an element
● Add local DOM
● Compose with local DOM
● Use data binding
● Declare a property
● Bind to a property

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 (-).

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>

Custom Element Lifecycle callbacks
● created instead of createdCallback
● attached instead of attachedCallback
● detached instead of detachedCallback
● attributeChanged instead of attributeChangedCallback

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

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.

Add local DOM
Index.html
<html>
<head>
<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>

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.

Compose with local DOM
Index.html
<html>
<head>
<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>

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.

Use data binding
Index.html
<html>
<head>
<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>

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

Declare a property
Index.html
<html>
<head>
<link rel="import" href="configurable-name-tag.html">
</head>
<body>
<configurable-name-tag
owner="Scott"></configurable-name-tag>
</body>
</html>
configurable-name-tag.html
<dom-module id="configurable-name-tag">
<template>
This is <b>{{owner}}</b>'s configurable-name-tag .
</template>
<script>
Polymer({
is: "configurable-name-tag",
properties: {
owner: {
type: String,
value: "Daniel"
}
}
});
</script>
</dom-module>

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

Bind to a property
Index.html
<html>
<head>
<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>

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/

Polymer

More Related Content

What's hot

Viewers also liked

Similar to Polymer

More from LearningTech

Recently uploaded

Polymer

Editor's Notes