Build Reusable HTML Components

17 JULY 2020

How to Build Reusable HTML Components Without Component-Based Frameworks

The concept of reusable components can clearly be seen in component-based frameworks like React and Vue.

This introduces modularity into our UI development, especially in cases where several screens or pages of a web project have shared components.

But how can we achieve this without a solid grasp of these component-based frameworks and a strong knowledge of JavaScript?

I thought about this after I worked on a 30-page website for a bank sometime back, before I knew how to use Vue.js, React, or PHP's famous includes function.

I was left with no choice other than to serially copy and paste the same header and footer sections into all 30 HTML files. Stressful, huh?

Definitely, because for every change made to either the header or footer, the same had to be done for all the other pages.

This frustrated me and got me to start thinking if there was a way that a page in pure HTML could have components. It would make work easier for people like my past self that just know HTML, CSS, and vanilla JavaScript.

In this article, I will quickly take you through how to build JavaScript components and call each component in your HTML.

Step 1: Create the reusable Header custom component

Imagine we have a website of five pages all having the same header and the same footer.

The first step is to copy the existing header HTML section and place it in a class object in JavaScript. Then, render it to the page using innerHTML:

class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <nav>            
       {*Header code goes here *}         
      </nav>
    `;
  }
}

class Footer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `	   
      <footer>            
        {*footer code goes here *}         
      </footer>     
    `;
  }
}

The JavaScript file defines a class called Header which extends the generic HTMLElement class.

connectedCallback() is invoked each time the custom element/component is appended into a document-connected element.

The difference between using connectedCallback() and constructor() is that constructor() is called when the element is created and connectedCallback() is called after the element is attached to the DOM.

But either one works for what we want to achieve.

Finally, this.innnerHTML displays the content in the HTML tag.

Step 2: Register the reusable header's custom component

To go further, we have to register a custom element on the page. We do that by using the CustomElementRegistry.define() method.

This takes the following arguments:

A DOMString representing the name you are giving to the custom element. Note that custom element names require a dash to be used in them (kebab-case) and they can't be single words.
A class object that defines the behavior of the element.

customElements.define('main-header', Header);
customElements.define('main-footer', Footer);

Defining each of the classes

main-header is the DOMString which represents the name we are giving to the element and Header is the object that defines the element.


<body>
  <main-header></main-header>
  
  <!-- body content goes here -->
  
  <main-footer></main-footer>
</body>

HTML file

This code segment is showing the HTML line which is the DOMString defined using customElements.

With these two steps you can easily create reusable components with just HTML and vanilla JavaScript.

Example

<main-header></main-header>

<p>How to Build Reusable HTML Components
</p>

<main-footer></main-footer>

body {
  font-family: system-ui;
  background: #fff;
  color: white;
  text-align: center;
}

p{
  padding:60px 0;
  color:#000;
}
footer{
  background-color:#555;
}
footer p{
  color:#fff;
}
footer li a{
  color:#fff;
}

class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
        `
  }
}

//Footer

class Footer extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 
      `
        <!-- Footer -->
<footer class="page-footer font-small blue pt-4">

  <!-- Footer Links -->
  <div class="container-fluid text-center text-md-left">

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-6 mt-md-0 mt-3">

        <!-- Content -->
        <h5 class="text-uppercase">Footer Content</h5>
        <p>Here you can use rows and columns to organize your footer content.</p>

      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none pb-3">

      <!-- Grid column -->
      <div class="col-md-3 mb-md-0 mb-3">

        <!-- Links -->
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!">Link 1</a>
          </li>
          <li>
            <a href="#!">Link 2</a>
          </li>
          <li>
            <a href="#!">Link 3</a>
          </li>
          <li>
            <a href="#!">Link 4</a>
          </li>
        </ul>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 mb-md-0 mb-3">

        <!-- Links -->
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!">Link 1</a>
          </li>
          <li>
            <a href="#!">Link 2</a>
          </li>
          <li>
            <a href="#!">Link 3</a>
          </li>
          <li>
            <a href="#!">Link 4</a>
          </li>
        </ul>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2020 Copyright:
    <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

      `
    
  }
}

customElements.define('main-header', Header);
customElements.define('main-footer', Footer);

It is not limited to the footer and header alone but to every reusable component you might have in your project.

PreviousJavaScript Tutorial NextDeveloping JavaScript components

Last updated 3 years ago