How to Build Reusable HTML Components Without Component-Based Frameworks

Grace Omole
Jan 6 · 3 min read

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:

  1. 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.
customElements.define('main-header', Header);
customElements.define('main-footer', Footer);

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>

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

https://codepen.io/grace_2241/pen/XWXxWgr

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

You can follow me on Twitter to stay updated on my latest posts and also subscribe to my youtube channel here for more tutorials. I hope you found this post helpful. :)

Reference:https://developer.mozilla.org

Frontend Weekly

It's really hard to keep up with all the front-end…

Grace Omole

Written by

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Grace Omole

Written by

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store