Creating Web Components using Vanilla JS

TechMeta — Fri, 01 May 2020 00:05:06 +0000

Hello everyone, this is my first 'dev.to' post. I will be going over, step by step, how I created two web components that I used on my personal website.

Building a Web Component

To begin I created two separate files, one was an html file (index.html) and the other was a JavaScript file (skillCard.js).

HTML

The HTML is very straightforward:

The (skill-card) tag is what I worked on in the JavaScript file.
Another important part of the HTML code is referencing the JavaScript file.

JavaScript

After I created the HTML document, I went ahead and created the JavaScript file.
The first thing I did was create a class for my custom element. Inside the class I created a constructor and also used the "super();" method to call the constructor of the HTMLElement that is being extended.

Inside the constructor, I also created a "shadow DOM".

Then, I defined the custom element at the bottom of the JavaScript file.

Above the class, I created the new element and that is where I am able to set the inner HTML to whatever I want.

This is where I can control the structure and styling of the information.

Completed Web Components

Complete HTML for skill-card

Complete JavaScript for skill-card

To view the changes as you go, I opened the HTML file in the Chrome browser.

Finished Web Component

The other web component was similar, except it did not use an icon. It is a basic project card where I describe my work and also provide a link to my project.

Complete HTML for project-card

Complete JavaScript for project-card