content decorating in polymer using JS.

page-counter.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">

<!-- Allow not having to include even links in the future -->
<polymer-element name="page-counter" attributes="page total_pages">
  <template>
    <style>
      :host {
        font-size: 1.2rem;
        font-weight: 300;
      }

      #container {
        float: right;
        margin-right: 120px;
      }

      #host {
        width: 960px;
        margin-right: auto;
        margin-left: auto;
      }

      polyfill-next-selector { content: 'a'; }
      ::content a {
        text-decoration: none;
        font-weight: 500;
      }

      .inherit {
        color: inherit;
        background-color: inherit;
      }
    </style>

    <div id="host">
      <div id="container">
        <a href="{{prev_page_link}}">
          <paper-fab style="float: left" mini icon="chevron-left"></paper-fab>
        </a>

        <paper-tabs style="float: left" selected="{{current_page - 1}}">
          <template repeat="{{key in keys}}">
            <paper-tab>
              <content select="[key='{{key}}']">
            </paper-tab>
          </template>
        </paper-tabs>
        
        <a href="{{next_page_link}}">
          <paper-fab style="float: left" mini icon="chevron-right"></paper-fab>
        </a>
      </div>
    </div>
  </template>

  <script>
    Polymer('page-counter', {
      domReady: function() {
        this.current_page = parseInt(this.page);
        page_count = parseInt(this.total_pages);

        if (this.current_page == 1){
          this.prev_page_link = "#";
        }
        else if (this.current_page == 2){
          this.prev_page_link = "index.html";
        }
        else{
          this.prev_page_link = "page" + (this.current_page - 1) + ".html";
        }

        if (this.current_page == page_count){
          this.next_page_link = "#";
        }
        else{
          this.next_page_link = "page" + (this.current_page + 1) + ".html";
        }

        // Adds a key to the attribute of each possible element and keeps
        // a list of all keys. Later, template will go only do content
        // on the element which has the current key.
        // Modified from here:
        //  https://stackoverflow.com/questions/25564150/decorate-elements-from-content
        this.keys = [];
        for (var i=0, elem=this.firstChild; elem; elem=elem.nextSibling) {
          if (elem.setAttribute) {
            elem.setAttribute('key', i);
            this.keys.push(i++);
          }
        }
      }
    });
  </script>
</polymer-element>