Google Polymer | Create your first custom html tag in minutes

by - 9:40 PM

I have been writing about polymer since two weeks by now, I gradually started developing my own components and decided to share my experience working with polymer. I would like to share how to make a simple but working custom polymer element and consume it. Before moving further, if you want to see what Salesforce had built on already on Polymer than read my post here and here 

Why Custom Elements ? 

Custom elements lets the author of code design their own custom tags like for example if you want to embed youtube or any other side video on a page you can simply do
<video-frame url='https://www.youtube.com/watch?v=IO7b8r9TYfY'></video-frame>
and one line code will result in this



How to build this ? 

To get started lets built a simple application that use custom tag we will built here, but to run this you need bunch of dependencies like polymer.html and polymer.js files. To download this, we will use bower package manager.

I prefer mac for most of my development, these commands are supported on apple.

Install bower as package manager that pull and saves all the related dependencies for you in one place.

Create  new directory/folder on your machine and through command line/ shell navigate to directory. Type in the following commands (like I am doing after navigating inside Oyecode_Polymer) directory
$ bower install  
$ bower install -save polymer 
You can install polymer in one line using bower with just two commands above. Having run this command, now create a new html  file called myelement.html. Copy paste this content in your new html file.

This is how my directory look like 


Lets create our first custom defined html tag or polymer element in other words.

<!-- Define element -->
<polymer-element name="video-frame" attributes="url" noscript>
   <template>
  <iframe width="560" height="315" src={{url}} frameborder="0" allowfullscreen></iframe>
 </template>
</polymer-element>

Remember this element uses javascript, if you do not want your element to start a script you can added NoScript tag like this

<polymer-element name="my-element" attributes="counter" noscript>

Let us use this custom tag by adding to html page. On render, this tag will result in html button which on click will increase the counter by +1 based on what attribute value you provided to the element. Remember, this example is officially demonstrated by Google.

<!-- Use element : Adding four videos-->
<!DOCTYPE html>
 <html/>
  <head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import"  href="bower_components/polymer/polymer.html">
<link rel="import"  href="bower_components/video-component/videoframe.html></head>
<body>
<video-frame url="//www.youtube.com/embed/IO7b8r9TYfY"></video-frame>
<video-frame url="//player.vimeo.com/video/60068519?byline=0"></video-frame>
<video-frame url="//www.dailymotion.com/embed/video/x2219zo"></video-frame>
<video-frame url="//www.metacafe.com/embed/5889737/"></video-frame>
</body>
</html> 


How to run the project
  • using cd command to go your directory like  $ cd ~/Desktop/Oyecode_polymer 
  • type in python -m SimpleHTTPServer to start server

Python 2.x:
python -m SimpleHTTPServer 
Python 3.x:
python -m http.server 
Test out the web server by loading the finished version of the project. For example:
Here is the output 

Press increment button to increment the counter, and you see once you have element ready, just in one line of code, you create a button, with counter displaying number and changing on click. I wrote couple of more element and have been explaining more in upcoming post about developing elements and event handling to achieve more awesomeness

Fork my repo here on harshit branch and jump start  here

You May Also Like

0 comments