awesome/fruits-components.html

## fruits-components.html
<dom-module id="fruit-component">
	<template>
		<p>color: {{color}}</p>

		<button on-tap="setColor">set color in light dom</button>

	</template>
	<script>
		Polymer({
			is: 'fruit-component',

			properties: {
				color: {
					type: String,
					notify: true
				}
			},

			ready: function() {
				this.style.color = this.color;
			},

			setColor: function() {
				var newColor = this.getRandomColor();
				this.set('color', newColor);
			},

			getRandomColor: function() {
			    var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'],
			    	i = 0,
			    	color = '#';

			    for (; i < 6; i++) {
			        color += hex[Math.floor(Math.random() * 16)];
			    }
			    return color;
			}
		});
	</script>
</dom-module>

## index.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>polymer - handlebars</title>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <script src="bower_components/handlebars/handlebars.min.js"></script>

        <link rel="import" href="fruit-component.html">
	</head>

	<body>
        <script id="fruits-template" type="text/x-handlebars-template">
            {{#each this}}
            <article>
                <h3>{{fruit}}</h3>
                <fruit-component color={{color}} class="item-fruits"></fruit-component>
            </article>
            {{/each}}
        </script>

        <section id="main-container"></section>

        <script>
        var fruits = [
            {'fruit': 'coconut', 'color': 'brown' },
            {'fruit': 'cherry', 'color': 'red' },
            {'fruit': 'pistachio', 'color': 'green' }
         ];

         var renderTemplate = {

            addListeners: function() {
                var items   = document.querySelectorAll('.item-fruits'),
                    i       = 0,
                    len     = items.length;

                for (; i<len; i++) {
                    items[i].addEventListener('color-changed', function (e) {
                        var newColor = e.detail.value;
                        this.parentElement.style.color = newColor;
                    }, true);
                }
            },

            render: function() {
                var source      = document.getElementById('fruits-template').innerHTML,
                    template    = Handlebars.compile(source),
                    html        = template(fruits);

                document.getElementById('main-container').innerHTML = html;
                this.addListeners();
            }

         };

         renderTemplate.render();

        </script>

	</body>

</html>
	<dom-module id="fruit-component">
	<template>
	<p>color: {{color}}</p>

	<button on-tap="setColor">set color in light dom</button>

	</template>
	<script>
	Polymer({
	is: 'fruit-component',

	properties: {
	color: {
	type: String,
	notify: true
	}
	},

	ready: function() {
	this.style.color = this.color;
	},

	setColor: function() {
	var newColor = this.getRandomColor();
	this.set('color', newColor);
	},

	getRandomColor: function() {
	var hex = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'],
	i = 0,
	color = '#';

	for (; i < 6; i++) {
	color += hex[Math.floor(Math.random() * 16)];
	}
	return color;
	}
	});
	</script>
	</dom-module>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>polymer - handlebars</title>
	<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
	<link rel="import" href="bower_components/polymer/polymer.html">
	<script src="bower_components/handlebars/handlebars.min.js"></script>

	<link rel="import" href="fruit-component.html">
	</head>

	<body>
	<script id="fruits-template" type="text/x-handlebars-template">
	{{#each this}}
	<article>
	<h3>{{fruit}}</h3>
	<fruit-component color={{color}} class="item-fruits"></fruit-component>
	</article>
	{{/each}}
	</script>

	<section id="main-container"></section>

	<script>
	var fruits = [
	{'fruit': 'coconut', 'color': 'brown' },
	{'fruit': 'cherry', 'color': 'red' },
	{'fruit': 'pistachio', 'color': 'green' }
	];

	var renderTemplate = {

	addListeners: function() {
	var items = document.querySelectorAll('.item-fruits'),
	i = 0,
	len = items.length;

	for (; i<len; i++) {
	items[i].addEventListener('color-changed', function (e) {
	var newColor = e.detail.value;
	this.parentElement.style.color = newColor;
	}, true);
	}
	},

	render: function() {
	var source = document.getElementById('fruits-template').innerHTML,
	template = Handlebars.compile(source),
	html = template(fruits);

	document.getElementById('main-container').innerHTML = html;
	this.addListeners();
	}

	};

	renderTemplate.render();

	</script>

	</body>

	</html>