kwltrs/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <link rel=import href=star-rating.html>
  <style>input[type=range] { font-size: 3em; } output { font-size: 2em; padding-left: 2em; }</style>
</head>
<body>

  <form>
    <input id=input type=range is=star-rating>
    <output id=aout></output>
  </form>

  <script>
    (function () {
      'use strict';

      const ratings = ['I hate it', 'I don\'t like it', 'It\'s okay', 'I like it', 'I love it'];

      const rating = document.getElementById('input');
      const aout = document.getElementById('aout');

      rating.addEventListener('change', (evt) => {
        let v = rating.value, s = ratings[v-1];
        aout.value = `${s} (${v} stars)`;
      });
    }());
  </script>

  <a class="shameless-plug" href="http://www.knowit.no/systemutviklere/">We're hiring</a>
</body>
</html>

## star-rating.html
<template id=star-rating-template>
  <style>
  :host {
    -webkit-appearance: none;
    color: inherit; background-color: inherit;
  }
  :host(:focus) { outline: none; }

  .star { color: papayawhip; text-shadow: 0 0 1px indigo; cursor: pointer; }
  .star.selected { color: orange; }

  .stars:hover .star { color: lightskyblue;  }
  .star:hover ~ .star { color: papayawhip;  }
  .star:hover ~ .star.selected { color: orange;  }
  </style>

  <span class=stars>
    <span class=star>★</span><span class=star>★</span><span class=star>★</span><span class=star>★</span><span class=star>★</span>
  <span>
</template>

<script>
(function () {
  'use strict';

  const toArray = (_) => Array.prototype.slice.call(_);
  const markSelected = (el) => el.classList.add('selected');
  const markDeselected = (el) => el.classList.remove('selected');

  const importDoc = document.currentScript.ownerDocument;
  const template = importDoc.querySelector('#star-rating-template');

  document.registerElement('star-rating', {
    extends: 'input',
    prototype: Object.create(HTMLInputElement.prototype, {
      createdCallback: {
        value: function () {
          this.min = 0; this.max = 5; this.step = 1;
          this.value = this.attributes.value || 0;

          const root = this.createShadowRoot();
          root.appendChild( template.content.cloneNode(true) );

          const stars = toArray( root.querySelectorAll('.star') );
          const ratingOfStar = (el) => stars.indexOf(el) + 1;
          const isStarElement = (el) => stars.indexOf(el) !== -1;
          const highlightStar = (value) => {
            stars.slice(0, value).forEach( markSelected );
            stars.slice(value).forEach( markDeselected )
          };

          const setRating = (newValue) => {
            highlightStar( newValue );

            if (this.value != newValue) {
              this.value = newValue;
              this.dispatchEvent( new Event('change') );
            }
          };

          this.addEventListener('click', (evt) => {
            let el = evt.path[0];

            if ( isStarElement(el) ) {
              setRating( ratingOfStar(el) );
            }
          });

          setRating( this.value );
        }
      }
    })
  });
}());
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<link rel=import href=star-rating.html>
	<style>input[type=range] { font-size: 3em; } output { font-size: 2em; padding-left: 2em; }</style>
	</head>
	<body>

	<form>
	<input id=input type=range is=star-rating>
	<output id=aout></output>
	</form>

	<script>
	(function () {
	'use strict';

	const ratings = ['I hate it', 'I don\'t like it', 'It\'s okay', 'I like it', 'I love it'];

	const rating = document.getElementById('input');
	const aout = document.getElementById('aout');

	rating.addEventListener('change', (evt) => {
	let v = rating.value, s = ratings[v-1];
	aout.value = `${s} (${v} stars)`;
	});
	}());
	</script>

	<a class="shameless-plug" href="http://www.knowit.no/systemutviklere/">We're hiring</a>
	</body>
	</html>
	<template id=star-rating-template>
	<style>
	:host {
	-webkit-appearance: none;
	color: inherit; background-color: inherit;
	}
	:host(:focus) { outline: none; }

	.star { color: papayawhip; text-shadow: 0 0 1px indigo; cursor: pointer; }
	.star.selected { color: orange; }

	.stars:hover .star { color: lightskyblue; }
	.star:hover ~ .star { color: papayawhip; }
	.star:hover ~ .star.selected { color: orange; }
	</style>

	<span class=stars>
	<span class=star>★</span><span class=star>★</span><span class=star>★</span><span class=star>★</span><span class=star>★</span>
	<span>
	</template>

	<script>
	(function () {
	'use strict';

	const toArray = (_) => Array.prototype.slice.call(_);
	const markSelected = (el) => el.classList.add('selected');
	const markDeselected = (el) => el.classList.remove('selected');

	const importDoc = document.currentScript.ownerDocument;
	const template = importDoc.querySelector('#star-rating-template');

	document.registerElement('star-rating', {
	extends: 'input',
	prototype: Object.create(HTMLInputElement.prototype, {
	createdCallback: {
	value: function () {
	this.min = 0; this.max = 5; this.step = 1;
	this.value = this.attributes.value \|\| 0;

	const root = this.createShadowRoot();
	root.appendChild( template.content.cloneNode(true) );

	const stars = toArray( root.querySelectorAll('.star') );
	const ratingOfStar = (el) => stars.indexOf(el) + 1;
	const isStarElement = (el) => stars.indexOf(el) !== -1;
	const highlightStar = (value) => {
	stars.slice(0, value).forEach( markSelected );
	stars.slice(value).forEach( markDeselected )
	};

	const setRating = (newValue) => {
	highlightStar( newValue );

	if (this.value != newValue) {
	this.value = newValue;
	this.dispatchEvent( new Event('change') );
	}
	};

	this.addEventListener('click', (evt) => {
	let el = evt.path[0];

	if ( isStarElement(el) ) {
	setRating( ratingOfStar(el) );
	}
	});

	setRating( this.value );
	}
	}
	})
	});
	}());
	</script>