grocery-item.html

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="grocery-item" attributes="show">
	<template>
		<style>
		:host {
			display: block;
			position: relative;
			background-color: #fff;
			padding: 20px;
			width: 50%;
		}
		polyfill-next-selector {
			content: '.item h3';
		}
		.item ::content h3 {
			margin: 0;
			padding-left: 20px;	
			font-weight: 300;
		}
		:host([purchased]) ::content h3 {
			text-decoration: line-through;
		}
		</style>

		<div class="item" layout horizontal center>
			<paper-checkbox on-tap="{{purchasedTapped}}"></paper-checkbox>
			<content select="h3"></content>
		</div>
		<content></content>

	</template>

	<script>
	Polymer('grocery-item', {
		publish: {
			purchased: {
				value: false,
				reflect: true
			}
		},
		purchasedTapped: function(event, detail, sender) {
			this.purchased = !this.purchased;
			this.fire('purchased-tap');
		}
	});
	</script>

</polymer-element>