gistfile1.html

<style scoped id="g-rating-styles">
  @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>

<script>
  xtag.register('g-ratings', {
    styles: 'g-rating-styles',
    events: {
      'tap:delegate(.star)': function(e){
        e.currentTarget.value = xtag.toArray(e.currentTarget.children).indexOf(this);
      }
    },
    accessors: {
      count: {
        attribute: { default: 5 },
        set: function(count){
          this.innerHTML = '';
          var value = this.value,
              num = Number(count);
          while (num--) {
            xtag.addClass(this.appendChild(document.createElement('span')), 'star' + (value-- ? 'full' : ''));
          }
        }
      },
      value: {
        attribute: {},
        get: function(){
          return this.getAttribute('value') || 0;
        },
        set: function(value){
          var num = Number(value);
          xtag.toArray(this.children).forEach(function(el, i){
            (i <= num) ? xtag.addClass(el, 'full') : xtag.removeClass(el, 'full');
          });
        }
      }
    }
  });
</script>