polymer-template

Template Polymer elements.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>

<!-- 
    MY DEMO ELEMENT DEFINITION
-->

<polymer-element name="my-element" constructor="" attributes="text">
  <template>
    <button id="btn" on-tap="{{performAction}}">{{btnText}}</button>
  </template>
   <script>
  Polymer('my-element', {
      'btnText': 'Not yet clicked',
      'num': 0,
      performAction: function() {
       this.btnText = 'clicked ' + ++this.num +' times';
      }
    });
  </script>
</polymer-element>

<!--
    PAPER SHADOW ELEMENT DEFINITION
    This was copy pasted from my local copy, you need to
    scroll some way to get to the implementation of my element
-->

<polymer-element name="paper-shadow">

  <template>

      <style>
          .paper-shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
}

.paper-shadow-animated.paper-shadow {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.paper-shadow-top-z-1 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}

.paper-shadow-bottom-z-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.paper-shadow-top-z-2 {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.paper-shadow-bottom-z-2 {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

.paper-shadow-top-z-3 {
  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.paper-shadow-bottom-z-3 {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}

.paper-shadow-top-z-4 {
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.paper-shadow-bottom-z-4 {
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22);
}

.paper-shadow-top-z-5 {
  box-shadow: 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

.paper-shadow-bottom-z-5 {
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2);
}

.paper-shadow-animate-z-1-z-2.paper-shadow-top {
  -webkit-transition: none;
  -webkit-animation: animate-shadow-top-z-1-z-2 0.7s infinite...