Polymer (library)

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles - wikipedia

Polymer has begun to gain increasing recognition in the market, with special attention paid to its structured design process, allowing for an interoperable "lego block" structure.

Polymer is used by a number of Google services and websites, including the redesigned YouTube, YouTube Gaming, the redesigned Google Earth, Google I/O websites, Google Play Music, redesign of Google Sites and Allo for web.

# Features

Polymer provides a number of features over vanilla (Vanilla software) Web Components:

* Simplified way of creating custom elements * Both One-way and Two-way data binding * Computed properties * Conditional and repeat templates * Gesture events

# Useage Custom elements can be created using the dom-module element provided by Polymer. Custom element definition comprises CSS style, HTML template of the element's local DOM, element properties, lifecycle callbacks and JavaScript methods:

<dom-module id="hello-element"> <template> <style> /* Local DOM CSS style */ </style> <!-- Local DOM --> Hello {{name}}! </template> <script> class HelloElement extends Polymer.Element { static get is() { return 'hello-element'; } static get properties() { return { name: { type: String } /* Element properties */ } } /* Custom methods */ } window.customElements.define(HelloElement.is, HelloElement); </script> </dom-module>

The element defined above can be used in HTML code:

<hello-element name="World"></hello-element>