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.