proto-element.coffee

Polymer 'proto-element',
  name: 'Me'
  age: 20
  color: '#0000ff'
  publish:
    valueless:
      value: false
      reflect: true
  nameChanged: ->
    if @name
      @name = @name[0].toUpperCase() + @name.slice 1
  ready: ->
    @$.el.textContent = @name + ' is ready!'
  setFocus: ->
    @$.nameInput.focus()

proto-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="proto-element" attributes="name color age">
  <template>
    <p>
      This is <b>{{name}}</b>'s proto-element.
      He likes the color <span style="color: {{color}}">{{color}}</span>
      and is <b>{{age}}</b> years old.
      Attribute valueless: {{valueless}}
    </p>
    <button on-click="{{setFocus}}">Set focus on name input</button>
    <p>
      <label for="ageInput">Age:</label>
      <input type="range" id="ageInput" value="{{age}}">
      <label for="nameInput">Name:</label>
      <input id="nameInput" placeholder="Enter name..." value="{{name}}">
      <label for="colorInput">Favorite color:</label>
      <input type="color" id="colorInput" value="{{color}}">
    </p>
    <span id="el">Not ready...</span>
  </template>
</polymer-element>