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>