Tutorial on Creating and Using a New Polymer Element
In my previous blog, I gave a short note on Google Polymer and with this blog I intent to throw light on one of the inside aspects related to it i.e. creating a polymer element. Prior to jumping headfirst into the coding or the detailed steps, I would like to define a custom element.
You can take a polymer based application and easily differentiate into custom elements. Literally transformed, each polymer application comprises a set of customer elements which you can develop by yourself or you can simply choose one catered by Polymer or a third party. Polymer is a coding friendly technology that provides any developer with the provision of creating custom elements from scratch. We also are granted with the option to reuse any predefined elements with Polymer.
The process of developing a custom element with Polymer is not that complex. As a matter of fact, the first step in the process is to develop a template for the custom element that you are intending to create. This template is often formulated with HTML, CSS and JavaScript. Given below is an illustration of a Polymer template:
<link rel=”import” href=”../bower_components/polymer/polymer.html”>
<polymer-element name=”foo-element” noscript>
<template>
<p>content </p>
</template>
</polymer-element>
and saved the file as foo.html
The template will also posses the functionalities that the element is supposed to exhibit.
The element will enable the developer to add the “content” into the code via the following snippet:
< foo-element ></ foo-element >
Initially, you need to incorporate an API to the Polymer core for the purpose of defining custom elements.
<link rel=”import” href=”../bower_components/polymer/polymer.html”>
As the second step, you can consider defining the name of the new element via Polymer’s directive:
<polymer-element name=”foo-element” noscript>
In the above snippet, i have given the name of my element as foo-element and here is the name is an inevitable attribute which should also come with a dash (“-“).
As the next step, we can utilize the template directive for the cause of wrapping code and related tags that develops the new element. In the above example the content text is extracted and wrapped with paragraph tags.
Follow the below given steps to use Polymer element
Create an index.html file
<!DOCTYPE html>
<html>
<head>
<script src=”webcomponents.js”></script>
<link rel=”import” href=”foo.html”>
</head>
<body>
<foo></foo>
</body>
</html>
Your final directory structure should look something like this:
yourapp/
bower_components/
webcomponentsjs/
polymer/
elements/
foo.html
index.html
Hope this post has given you an idea about creating and using a new polymer element. Let me know your comments here.
- Share this
