gistfile1.html

<element name="g-ratings" attributes="count value">

  <template>
  
    <style>
      @host {
        * {
          white-space: nowrap;
          -webkit-user-select: none;
          -moz-user-select: none;
        }
      }

      .star {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-image: url('images/star_blank.png');
        cursor: default;
      }
      
      .star.full {
        background-image: url('images/star_full.png');
      }
    </style>
    
    <template repeat="{{stars}}">
      <span index="{{index}}" class="star {{starClass}}" touch-action="none" on-tap="starClick"></span>
    </template>
    
  </template>
  
  <script>
    Polymer.register(this, {
      count: 5,
      value: 0,
      ready: function() {
        this.countChanged();
      },
      countChanged: function() {
        this.stars = [];
        for (var i = 0; i < this.count; i++) {
          this.stars.push({index: i});
        }
        this.valueChanged();
      },
      valueChanged: function() {
        this.stars && this.stars.forEach(function(s, i) {
          s.starClass = i < this.value ? 'full' : '';
        }.bind(this));
      },
      starClick: function(inEvent, inDetail, inSender) {
        var s = inSender.templateInstance.model;
        this.value = s.index + (s.starClass == 'full' ? 0 : 1);
      }
    });
  </script>

</element>