A simple example

How bindings work

You can bind variables to your view (and vice versa) by doing the following:

Make sure you have included the proper Polymer 1.0 files. See the previous example if you have not.

You can declare properties on your custom element by adding them to the properties object on your prototype.

Bindings can be inserted into the view using {{...}} mustache-style syntax.

How to setup a code-explainer

Using Code Explainer (now with Polymer 1.2+)

Using Polymer elements (like all Web Components) is absurdly simple:

Put your sample code into a script tage of type "text/template". If you have any <script> tags, you should escape the < with <

Annotate the code where you like using [start-XYZ] and [end-XYZ], using short labels. You can have several non-contiguous annotations that will all be highlighted, if you want.

Arbitrary HTML can be placed after the </script> tag and before the first <code-explainer-info> tag. <h2> tags work great for titles, but you can style it however you like.

Using the annotations you already made, create <code-explainer-info> tags that house the information. They can contain arbitrary html, like <code> tags and links. The label attribute will be the title of the blurb.

The information panels will be displayed in the order you write them and can be labeled with any string. If your example needs to count 1, 2, 3a, 3b, 7 - go right ahead. If you provide no label, no bullet will be rendered.

Add the collapsable attribute to any or all of the information blurbs to give them some animation as the code or blurbs are moused over.

Other examples, demonstrating Polymer 0.5

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.