Using Polymer Elements

Using Polymer elements (like all Web Components) is absurdly simple:
Find a component and import its definition into your page using an HTML Import (<link rel="import">). Once imported, custom elements become first-class HTML elements and can be used like any other.

Creating Polymer Elements

Polymer sugars Web Components standards with awesome features for creating custom elements:
Define custom elements declaratively using <polymer-element> Shadow DOM encapsulates your element's internals. Template markup is compartmentalized, and styles don't leak in or out. Properties that are published can be initialized via markup and invoke change handlers when modified. Properties on the element can be bound directly into the view, with robust support for expressions. Event handlers can be bound to functions on the element declaratively using on-event attributes. Any template children can be referenced by id on this.$, eliminating boilerplate querySelector's.

Creating Polymer Elements

Polymer sugars Web Components standards with awesome features for creating custom elements:
Define custom elements declaratively using <polymer-element> Shadow DOM encapsulates your element's internals. Template markup is compartmentalized, and styles don't leak in or out. Properties that are published can be initialized via markup and invoke change handlers when modified. Properties on the element can be bound directly into the view, with robust support for expressions. Event handlers can be bound to functions on the element declaratively using on-event attributes. Any template children can be referenced by id on this.$, eliminating boilerplate querySelector's.

How bindings work

Variables defined in the scope of a Polymer object are available for binding. Bindings can be inserted into the view using {{...}} mustache-style syntax.