Creating Web Components with Polymer

Submitted by matt_eaton on Sat, 08/09/2014 - 04:34 PM

Tags

HTML

One the new emerging technologies on the web that I have kept my eye is web components. What are web components? Web components are a set of standards that allow developers to group styles, markup, and JavaScript into custom elements to then be output in custom tags defined by the developer. What does all of that mean? It means that developers can create small bundles of HTML, with CSS, and JavaScript in a modular scope, output it on a page, and not have any of those styles or script behavior leak out into the rest of your page. The same goes for the rest of your styles and scripts in your page, they cannot inherently be used in the scope of your new element. Think of it as a way to create a custom piece of HTML and output it everywhere with consistent behavior.

What is the browser support like for web components? Well at this current time support for web components is pretty spotty and not very stable on all major browsers, but that is where the Polymer Project comes into play and can normalizes the playing field a bit. The Polymer project is one part polyfill and one part functionality based so it gives web components a fighting chance on browsers like Internet Explorer and Safari, where support is not even considered at this time . You can use Polymer to create custom elements, or use it as a polyfill, I prefer to do both.

How do you write a basic Polymer Elements? Simple. Include the necessary Polymer tags, build the template for your custom tag, add styles or functionality, and output the tag.

~~To get a bit more in-depth, here is a very short example I created from ele.io. Ele is almost like a CodePen or JSFiddle for Web Components, create your element and immediately see the result.~~ This link no longer works. (1-8-2016)

Let's get started:

First we build out tag

<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform/platform.js"></script>
 
<!-- 2. Load core Polymer. -->
<link rel="import" href="polymer.html">
 
<!--3. Build your customer Polymer Element -->
<polymer-element name="teaser-block" attributes="src, title, desc">
  <template>
    <style>
      :host {
        font-family: sans-serif;
      }
      img{width::50px; height:50px; float:left; margin-right:5px;}
      .desc, .title{width:300px float:left; display:block; margin:3px 0;}
    </style>
    <div class="container">
      <img src="{{src}}" />
      <div class="title">{{title}}</div>
      <div class="desc">{{desc}}</div>
    </div>
  </template>
  <script>
    Polymer('teaser-block', {
     'Polymer Dev',
      ready: function() {
 
      }
    });
  </script>
</polymer-element>

Next, we output our tag

<!--4. Output your tag onto the page you wish to display your element -->
<link rel="import" href=" teaser-block.html">
 
<teaser-block 
      src="http://alturl.com/bus56"
      title="Sweet Title!"
      desc="Here is my short description!"        
></teaser-block>

~~For a live demo of this in action, check out my element here on ele.~~ This link no longer works. (1-8-2016)

As always, I would love to hear from you about edit, comments, questions, or concerns!

Member for

3 years 9 months

Matt Eaton

Long time mobile team lead with a love for network engineering, security, IoT, oss, writing, wireless, and mobile. Avid runner and determined health nut living in the greater Chicagoland area.

Twitter

Github