install Polymer and explore creating our first custom element:
bower install polymer
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="./hello-world.html">
</head>
<body>
<hello-world name="ZTW"></hello-world>
</body>
</html>
- include webcomponents-list.js file
- import polymer.html file
- import our compoment hello-world.html file
hello-world.html:
<dom-module id="hello-world">
<template>
<input type="text" value="{{name::keyup}}"> <!-- {{}} two way data binding, ::bind to event -->
<h1>Hello, [[name]]</h1> <!-- [[]] one way data binding -->
</template>
<script>
Polymer({
is: "hello-world" // string match the tag
})
</script>
</dom-module>