Polymer helloworld: create web component using dom-module

Categories: Development NotesHTML5; Tagged with: ; @ July 19th, 2015 23:10

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>



// Proudly powered by Apache, PHP, MySQL, WordPress, Bootstrap, etc,.