kwltrs/example.html

## example.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Components</title>
        <link rel="import" href="star-rating.html">
    </head>
    <body>
        <form>
            <input type="range" is="star-rating" name="rating">
            <output></output>
        </form>

        <script>
            var form = document.querySelector('form');
            var el   = document.querySelector('input');
            var aout = document.querySelector('output');

            el.addEventListener('change', function (evt) {
                aout.value = evt.target.value;
            });

            aout.value = el.value;

            // new school access
            var f = new FormData(form);
            f.get('rating');

            // old school access
            document.forms[0].elemets[0];
            document.forms[0].rating;
        </script>
        <a class="shameless-plug" href="http://www.knowit.no/systemutviklere/">We're hiring</a>
    </body>
</html>

## star-rating.html
<template id="star-rating">
    <style>
        :host {
            -webkit-appearance: none;
            color: inherit; background-color: inherit;
        }
        span { display: inline-block; }
        a {
            display: inline-block;
            text-decoration: none;
            padding: 0; margin: 0;
            color: #fefefe;
        }
        a.selected {
            color: yellow;
        }
        a.hover, a.hover.selected {
            color: lightblue;
        }
    </style>

    <span id="starfield">
        <a href="#">★</a>
        <a href="#">★</a>
        <a href="#">★</a>
        <a href="#">★</a>
        <a href="#">★</a>
    </span>
</template>

<script>
    var importDoc = document.currentScript.ownerDocument;
    var template = importDoc.querySelector('template#star-rating');

    var RatingPrototype = Object.create(HTMLInputElement.prototype, {
        createdCallback: {
            value: function () {
                this.min = 0;
                this.max = 5;
                this.step = 1;
                this.value = this.value || 0;

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

                var els = root.querySelectorAll('#starfield a');
                var items = Array.prototype.slice.call(els);

                var addOrRemoveClass = function (name, index) {
                    items.slice(0, index).forEach(function (item) {
                        item.classList.add(name);
                    });
                    items.slice(index).forEach(function (item) {
                        item.classList.remove(name);
                    });
                };

                var setValue = function (newValue) {
                    var changed = this.value != newValue;
                    this.value = newValue;
                    addOrRemoveClass('selected', this.value);

                    if (changed)  {
                        this.dispatchEvent(new Event('change'));
                    }
                }.bind(this);

                items.forEach(function (item, index) {
                    item.addEventListener('click', function (evt) {
                        evt.preventDefault();
                        setValue(index + 1);
                    });

                    item.addEventListener('mouseover', function (evt) {
                        addOrRemoveClass('hover', index + 1);
                    });
                    item.addEventListener('mouseout', function (evt) {
                        addOrRemoveClass('hover', 0);
                    });
                });

                setValue(this.value);
            }
        }
    });

    document.registerElement('star-rating', {
        prototype: RatingPrototype,
        extends: 'input'
    });
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Web Components</title>
	<link rel="import" href="star-rating.html">
	</head>
	<body>
	<form>
	<input type="range" is="star-rating" name="rating">
	<output></output>
	</form>

	<script>
	var form = document.querySelector('form');
	var el = document.querySelector('input');
	var aout = document.querySelector('output');

	el.addEventListener('change', function (evt) {
	aout.value = evt.target.value;
	});

	aout.value = el.value;

	// new school access
	var f = new FormData(form);
	f.get('rating');

	// old school access
	document.forms[0].elemets[0];
	document.forms[0].rating;
	</script>
	<a class="shameless-plug" href="http://www.knowit.no/systemutviklere/">We're hiring</a>
	</body>
	</html>
	<template id="star-rating">
	<style>
	:host {
	-webkit-appearance: none;
	color: inherit; background-color: inherit;
	}
	span { display: inline-block; }
	a {
	display: inline-block;
	text-decoration: none;
	padding: 0; margin: 0;
	color: #fefefe;
	}
	a.selected {
	color: yellow;
	}
	a.hover, a.hover.selected {
	color: lightblue;
	}
	</style>

	<span id="starfield">
	<a href="#">★</a>
	<a href="#">★</a>
	<a href="#">★</a>
	<a href="#">★</a>
	<a href="#">★</a>
	</span>
	</template>

	<script>
	var importDoc = document.currentScript.ownerDocument;
	var template = importDoc.querySelector('template#star-rating');

	var RatingPrototype = Object.create(HTMLInputElement.prototype, {
	createdCallback: {
	value: function () {
	this.min = 0;
	this.max = 5;
	this.step = 1;
	this.value = this.value \|\| 0;

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

	var els = root.querySelectorAll('#starfield a');
	var items = Array.prototype.slice.call(els);

	var addOrRemoveClass = function (name, index) {
	items.slice(0, index).forEach(function (item) {
	item.classList.add(name);
	});
	items.slice(index).forEach(function (item) {
	item.classList.remove(name);
	});
	};

	var setValue = function (newValue) {
	var changed = this.value != newValue;
	this.value = newValue;
	addOrRemoveClass('selected', this.value);

	if (changed) {
	this.dispatchEvent(new Event('change'));
	}
	}.bind(this);

	items.forEach(function (item, index) {
	item.addEventListener('click', function (evt) {
	evt.preventDefault();
	setValue(index + 1);
	});

	item.addEventListener('mouseover', function (evt) {
	addOrRemoveClass('hover', index + 1);
	});
	item.addEventListener('mouseout', function (evt) {
	addOrRemoveClass('hover', 0);
	});
	});

	setValue(this.value);
	}
	}
	});

	document.registerElement('star-rating', {
	prototype: RatingPrototype,
	extends: 'input'
	});
	</script>