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>