Act I

Specs

var MyElement = document.registerElement('my-element');
// or document.createElement


<my-element></my-element>

<link rel="import" href="my-widget.html">

<my-widget></my-widget>

<template>
  <div>
    Template content
  </div>
</template>

<style>
  my-element {
    display: block;
  }

  my-element > div {
    border: solid 1px #ccc;
  }
</style>

<my-element>
  <div>Box with border</div>
</my-element>

var shadow = el.createShadowRoot(); 
shadow.innerHTML = "<style> span { color: orange }</style>" 
+ "<span>Hello :)</span>";

Current Status

http://jonrimmer.github.io/are-we-componentized-yet/

Act II

Using an Element

<!-- Polyfill for older browsers -->
<script src="bower_components/platform/platform.js"></script>

<!-- HTML Import component -->
<link rel="import" href="bower_components/google-map/google-map.html">

<!-- Use Component -->
<google-map latitude="6.2670502" longitude="-75.5839547" zoom="15"></google-map>

Creating an Element

<polymer-element name="hello-world" attributes="who">
  <template>
    <p>Hello <strong>{{who}}</strong></p>
  </template>

  <script>
    Polymer('hello-world', {
      who: 'World'
    });
  </script>
</polymer-element>

Advanced Element

<polymer-element name="my-counter" attributes="counter">
  <template>
    <style> /*...*/ </style>
    <div id="label"><content></content></div>
    Value: <span id="counterVal">{{counter}}</span><br>
    <button on-tap="{{increment}}">Increment</button>
  </template>
  <script>
    Polymer({
      counter: 0, // Default value
      counterChanged: function() {
        this.$.counterVal.classList.add('highlight');
      },
      increment: function() {
        this.counter++;
      }
    });
  </script>
</polymer-element>

Core Elements

• core-ajax
• core-animation
• core-input
• core-menu
• core-selector
• ...
  

http://www.polymer-project.org/docs/elements/

Paper Elements

• paper-button
• paper-tabs
• paper-dialog
• ....
  

http://www.polymer-project.org/docs/elements/paper-elements.html

Other Elements

http://customelements.io/

• video-camera
• x-gif
• x-instragram
• ...