What is Polymer?
Polymer Project was started as an experiment in 2012 to embed web developers right inside chrome team, the goal was to tighten the feedback loop between developers building on the web and the engineers implementing the browsers. The experiment was then turned into a project focused on identifying developers needs and participating in the standard process to address needs in the browser. Polyfills and libraries were developed to encourage use of these new features and aimed to make the forward platform to make it more capable for developers, so developers can make great user experiences. The versions of polymer which have been published yet are:-
Polymer 0.5 — November 2014
Polymer 1.0 — May 2015
Polymer 2.0 — May 2017
Polymer 3.0 — August 2017
Polymer promotes the use of the original framework/platform of the web. It use original
<link> tags to import web components. Polymer extends the capabilities of the platform with the sole purpose of helping the developers make reusable web components.
But our campaign to #UseThePlatform is ultimately not about driving people to use the stuff the Polymer Project builds. It’s about promoting the use of the web platform to deliver the best apps possible, and helping to ensure that web users and developers get everything they deserve from the platform in the future. — Polymer Project’s Role
The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be:
Instantiated using a constructor or
- Configured using attributes or properties.
- Populated with internal DOM inside each instance.
- Responsive to property and attribute changes.
- Styled with internal defaults or externally.
- Responsive to methods that manipulate its internal state.
To set the development environment for polymer make sure that npm and Node.js is correctly installed on your machine. To confirm that npm is correctly installed run
To confirm Node.js is correctly installed:
Install Polymer Cli:
npm install -g polymer-cli or
npm install -g polymer-cli --unsafe-perm
To confirm that the polymer cli has been correctly installed:
Once you are done with the installation, you can create your project by manual installation or you can clone basic code from here:
git clone https://github.com/PolymerLabs/start-polymer3.git
For manual install
npm init or yarn init
npm install — flat @polymer/polymer@next
yarn add — flat @polymer/polymer@next
this will create node_modules folder and package.json file. After that, you can create .html file and provide source path of your components inside script tag.
Since, by following above commands one can install polymer-cli on his/her local machine. You can see example of polymer project on https://github.com/rashmina34/PolymerProject
Lifecycle callbacks are used to accomplish the tasks for built-in features of Polymer.Element class.
List of legacy callbacks in Polymer:
created − It is called when you create an element before setting the property values and initializing local DOM.
ready − It is called when you create an element after setting the property values and initializing local DOM.
attached − It is called after attaching the element to the document and can be called more than one time throughout the lifetime of an element.
detached − It is called after detaching the element from the document and can be called more than once throughout the lifetime of an element.
attributeChanged − It is called when there are changes in an element’s attributes and it holds the attribute changes, which are not compatible with the declared properties.