<!DOCTYPE html>
<html lang="en">
<head>
<!-- import polyfills -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- import dom helper elements -->
<script type="module" src="https://unpkg.com/@polymer/polymer@3.0.0-pre.12/lib/elements/dom-bind.js"></script>
<script type="module" src="https://unpkg.com/@polymer/polymer@3.0.0-pre.12/lib/elements/dom-repeat.js"></script>
</head>
<body>
<!-- Wrap elements with auto-binding template to -->
<!-- allow use of Polymer bindings in main document -->
<dom-bind>
<template>
<!-- Note the data property which gets sets below -->
<template is="dom-repeat" items="{{data}}">
<div>{{item.name}}: {{item.price}}</div>
</template>
</template>
</dom-bind>
<script>
var autobind = document.querySelector('dom-bind');
// set data property on dom-bind
autobind.data = [
{ name: 'book', price: '$5.00'},
{ name: 'pencil', price: '$1.00'},
{ name: 'flux capacitor', price: '$8,000,000.00'}
];
</script>
</body>
</html>