Introducing Polymer Web Elements by Google

Polymer is a library created by Google that makes it easier to create elements.

Elements are reusable sections of code that makes it much easier to implement consistent, good practices. Sometimes elements are created by web standards bodies such as the W3C, but you can also make your own elements for your own projects.

In this tutorial, I’m going to show you how to use the Polymer library to build your own elements.

Download Polymer

Go to the Polymer Project download page, click the “Get Polymer” button and then click the download button.

• Extract the downloaded file. I found that the file didn’t have a .zip and I had to add it manually.
• Inside the extracted files, you’ll find a /components/ folder. Move the /components/ folder to your web project.
• Also create an /elements/ folder.

When you’re set up correctly, your folder structure will look like the image below:

Now you need to load the webcomponents.js file. In this, example I’m going to add this to the head of my index.html file:

<script src="components/bower_components/webcomponentsjs/webcomponents.js"></script>

Creating a web element

Let’s display the most famous phrase in the coding business: “Hello world!”.

• Create a file inside elements folder called hello-world.html and with the following code:

<link rel="import" href="path/to/polymer.html"> 
<polymer-element name="hello-world" noscript>
  <template>
    <h1>Hello world!</h1>
  </template>
</polymer-element>

• The link tag points to a polymer dependency. Please double check the path to polymer.html is correct in your end.
• The polymer-element tag define the name of our custom element, in this case is hello-world.
• The noscript attribute says this element doesn’t include the script tag.

In our main HTML file (in this example it is index.html), load your new file. Make sure to insert this line after the webcomponents.js script:

<link rel="import" href="path/to/hello-world.html">

Inside the body tag add our new web element:

<hello-world></hello-world>

Open this project in a browser to see the result:

Create a dynamic web element

The previous example only displayed a static message. Now, we will show you how to add custom values to your web element and get a dynamic result: “Hello a-custom-name!”

Create a file inside elements folder named hello-name.html with the following code:

<link rel="import" href="path/to/polymer.html">
<polymer-element name="hello-name" attributes="name">
  <template>
    <h1>Hello {{name}}!</h1>
  </template>
  <script>
    Polymer({
      name: "Default Name"
    });
  </script>
</polymer-element>

The polymer-element tag not only defines the name of our custom element, but it also now allows attributes. In this case our attribute is name.

The script tag loads the code to allow a default value for the attribute name.

In our main HTML file, load this new file after webcomponents.js script:

<link rel="import" href="path/to/hello-name.html">

Inside the body tag add our new web element:

<hello-name name="John Doe"></hello-name>

Open this project in a browser to see the result:

Conclusion

You can create web elements to handle your repetitive code snippets. They save you time and give you a cleaner HTML structure.