Web Components using Google Polymer 2.0

What is Polymer?

Polymer (also known as Polymer.js) is an open-source JavaScript library that provides some syntactic sugar and support for building custom HTML elements with Web Components, the latest standard being implemented by the W3C. Read on to learn about Polymer, Web Components, and the quest for a componentized web development.

Polymer.js & its Rising Popularity

In 2017, Polymer.js is one of the most upcoming high-in-demand web technologies which is helping developers create custom elements with the new Web Components specification & the essential part of this component-oriented approach to web development is as simple and yet very appealing.

Recently Polymer 2 has launched and started gaining its popularity; Polymer 2.0 promises much improved ECMAScript 6 standards support and interoperability with other libraries and frameworks

“Polymer 2.0 is based on web platform standards that are natively supported on over 1 billion mobile devices,” Google’s Wendy Ginsberg, product manager for Polymer, said at the recent Google I/O conference in Silicon Valley.

Let’s learn one of the most upcoming Web Components using Google Polymer 2.0. 

Introduction to ES 6

• let ,const, template literals 
• Object Oriented Javascript 
• function expression, arrow function ,Prototype,Object literals,Asyn Programming using callbacks, Promises
• Classes instance, static variables, methods 
• setters and getters 
• Object relationship using has-a ,is-a(Inheritance) 

Wonderful World of Web Components -Exploring Web Components Spec, and Implementation

• What is Web Component? 
• Why Web Component 
• W3C Web components standards 
• Custom Elements 
• Shadow DOM 
• HTML Imports 
• HTML Templates 
• Polyfils V0 ,V1

Web Component Development Setup

• Editors - Visual Studio Code 
• Node.js - latest Edition bower tool 
• Web Component Polyfils setup 
• installing tiny Web Server - lite-server 
• create index.html 
• Web Component Polyfils 

Custom Elements

• Introduction Defining a new Element 
• Defining an element's JavaScript API 
• Rules on creating Custom Elements 
• Extending Custom Element 
• Extending native HTML Element 
• Custom Element Reactions 
• Properties and Attributes 
• Observing Changes to Attributes 
• Element-defined Content

Shadow DOM

• What is Shadow DOM 
• Abstraction and Encapsulation of Web Component 
• Shadow tree 
• Slots Slot able 
• Creating Element that uses Shadow DOM

Templates

• Templates What is it? 
• Template creating using innerHTML property 
• Template creating using