Requirement: creating a component to display user info
Step 1: Create a web component using dom-module:
user-info.html:
<link rel="import" href="../bower_components/polymer/polymer.html" /> <dom-module id="user-info"> <template> <div id="container"> Hi, <span>{{user_name}}</span>! </div> </template> <style> #container { font-size: 11px; color: gray; } </style> <script> Polymer({ is: 'user-info', properties: { user_name: { type:String, value:"Mr.default" } } }); </script> </dom-module>
Step 2: Use the newly created component:
<link rel="import" href="components/user-info.html" /> <template is="dom-bind"> <user-info user_name="Li"></user-info> </template>