Building a Pager Web Component – Part 3: HTML Import

In the last post, we made use of a template and shadow DOM in our pager web component. In this post, we will make use of HTML import and put our pager web component in a separate file.

Moving the component bits to a separate file

Firstly, let’s create a new file called “pager.html” for our web component and move the template and script tag into there. The contents of pager.html should now be:

<template>
  <style>
    .x-pager-link {
      margin-right: 6px;
      text-decoration: none;
    }
    a.x-pager-link:hover {
      text-decoration: underline;
    }
    .x-pager-text {
      margin-left: 20px;
    }
  </style>
  <div>
    <a href="#" title="Go to the first page" class="x-pager-link">first</a>
    <a href="#" title="Go to the previous page" class="x-pager-link"
      >previous</a
    >
    <a href="#" title="Go to the next page" class="x-pager-link">next</a>
    <a href="#" title="Go to the last page" class="x-pager-link">last</a>
    <span class="x-pager-text">page x of y</span>
  </div>
</template>


<script>
  (function() {
    var Proto = Object.create(HTMLElement.prototype),
      root;


    Proto.createdCallback = function() {
      var template = document.querySelector("template"),
        clone = document.importNode(template.content, true);
      root = this.createShadowRoot();
      root.appendChild(clone);
    };


    document.registerElement("x-pager", { prototype: Proto });
  })();
</script>

Referencing the component

In our page, we can now reference the pager component using a HTML import link tag . The HTML in our page should now be:

<!DOCTYPE html>
<html>
  <head>
    <link rel="import" href="pager.html" />
  </head>
  <body>
    <h1>my app</h1>


    <x-pager page="1" page-count="5"></x-pager>
  </body>
</html>

document.currentScript.ownerDocument

If we test our component now by navigating to our page, the component will not work. The problem is how we are referencing the template - document.querySelector("template") does not find it.

error

We need to get a reference to the web component document using document.currentScript.ownerDocument and select the template in this. Our changed pager component markup show now be:

<template>
  <style>
    .x-pager-link {
      margin-right: 6px;
      text-decoration: none;
    }
    a.x-pager-link:hover {
      text-decoration: underline;
    }
    .x-pager-text {
      margin-left: 20px;
    }
  </style>
  <div>
    <a href="#" title="Go to the first page" class="x-pager-link">first</a>
    <a href="#" title="Go to the previous page" class="x-pager-link"
      >previous</a
    >
    <a href="#" title="Go to the next page" class="x-pager-link">next</a>
    <a href="#" title="Go to the last page" class="x-pager-link">last</a>
    <span class="x-pager-text">page x of y</span>
  </div>
</template>


<script>
  (function() {
    var Proto = Object.create(HTMLElement.prototype),
      importDoc = document.currentScript.ownerDocument,
      root;


    Proto.createdCallback = function() {
      var template = importDoc.querySelector("template"),
        clone = document.importNode(template.content, true);
      root = this.createShadowRoot();
      root.appendChild(clone);
    };


    document.registerElement("x-pager", { prototype: Proto });
  })();
</script>

In the next post we will look at reading the attributes “page” and “page-count”.