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 -
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>
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 -
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>
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
0 Comments