Web Components (Part 4) – HTML Imports

html imports web components
Mon Sep 01 2014

Introduction

Till now we’ve seen

Templates Responsible for re-using parts of code
Shadow DOM Encapsulation
Custom Elements Create meaningful and descriptive HTML while inheriting logic from other elements

 

puzzle

The last part of the core elements of Web Components are HTML Imports and they are responsible for delivering our components and data.

Facebook Like Component

So time to put it all together! Let us see an example of adding a facebook like button in our page.

There are two ways to add a facebook like button in our page (and any third party component in general).

1. With an IFrame

<iframe frameborder="0" src='http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/DotNetWeekly&appId=163535247045000'></iframe>

2. With Javascript

<div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=163535247045000";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <div class="fb-like" data-href="http://www.facebook.com/DotNetWeekly" data-send="true" data-width="940" data-show-faces="true"></div>

3. With HTML Imports (new)

Wouldn’t it be extremely awesome to add functionality and components in our page with the same ease as CSS for example?
To add CSS the only thing we should do is to add this tag in our head right?

<link rel="stylesheet" type="text/css" href="style.css" />

To add a facebook like button (with all of its HTML/CSS/JS) we can now do the following

<!DOCTYPE HTML>
<html>
<head>
<link href="facebook-plugin.html" rel="import" />
</head>
<body>

<fb-like></fb-like>

</body>
</html>

I would like you to notice the <link href=”facebook-plugin.html” rel=”import”/> tag which is the new sexy HTML Import functionality. This basically loads the html page with all of the HTML/CSS/JS in it.

Now in the facebook-plugin.html page I’ve added a template tag that loads the necessary iframe some styling and create the custom element fb-like that uses that template

<template id="fb-template">
<iframe frameborder="0" src='http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/DotNetWeekly&appId=163535247045000'></iframe>
</template>
<style>
iframe{
border:none;
}
</style>
<script>
var FBLikeProto = Object.create(HTMLElement.prototype);
FBLikeProto.attachedCallback = function () {
this.createShadowRoot();
var link = document.querySelector('link[rel=import]');
this.shadowRoot.innerHTML = link.import.getElementById("fb-template").cloneNode(true).innerHTML;
}
var FBLike = document.registerElement('fb-like', {
prototype: FBLikeProto
});
</script>

Checkout the example over here => http://bstavroulakis.com/demos/webcomponents/html-imports/facebook-plugin-demo.html

Conclusion

Now instead of creating this HTML page which basically is a wrapper for the existing component imagine just loading and HTML Import from Facebook directly and adding a facebook like button on your page which just the tag <fb-like app-id=”342502398″ href=”http://www.dotnetweekly.com”></fb-like> with attributes to personalize it.

Or to add a google map instance you could just add this HTML Import <link rel=”import” src=”bower_components/google-map/google-map.html”> and add a google map element in your page

  
<google-map latitude="37.77493" longitude="-122.41942" fitToMarkers>
  <google-map-marker latitude="37.779" longitude="-122.3892"
      draggable="true" title="Go Giants!"></google-map-marker>
  <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>

This way you have super encapsulated, redistributable, descriptive code which you can expand easily. You can checkout an example over here => http://component.kitchen/components/google-map

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!