Google Polymer - First Hello World Component

In this post, we will see how we can create our first web component with Google Polymer. It's very easy.

But before that we should understand what is Web Component?
As Google says, which I think is the best way how you can define Web Component -

Truely Web Components are the future.

Step : Create the Web Component -
Below is the code to create the web component "Hello-World" and save it as - "Hello-World.html"

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="Hello-World" noscript>
    <template>
        <span>Hello from <b>Hello-World</b>. This is a shadow DOM. </span>
    </template>
</polymer-element>

You can save it under <PROJECT ROOT DIRECTORY>elements\Hello-World.html.
Two important things to remember here -

name attribute is must and it must contain "-". It specifies the name of the element and this is the name we should refer in other parts of the project.
noscript indicates that this is a simple html file and it doesn't require any script.

Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/elements/Hello-World.html
Step : Create the Web Component -

Here we will create the html page "testHello-World.html" and inside that we will refer the newly created web component as shown below -

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Test with Google Polymer</title>
    <!-- Load the platform support library -->
    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- Load the component -->
    <link rel="import" href="elements/Hello-World.html">
</head>
<body>
    <!-- Declare the element by tag -->
    <Hello-World></Hello-World>
</body>
</html>

As you can see that in the body section we have only declared the newly created web component. In this way we can refer this web component in many places. Another advantage is that any future changes/enhancement, we can do it one place and it will be reflected in all the places.

Source Code @ https://github.com/suddeb/Learning-Polymer/blob/master/testHello-World.html
Step : Start the Web Server -
To test the file, we have to start the web server. The instruction for mac is given below -

sudo python -m SimpleHTTPServer 80

Below is the output when you run the code from browser - http://localhost/testHello-World.html