Creating a Web Component

In this blog, we'll be creating our very own Web Component which can be used merged with our HTML. This is the second blog in the series of Web Components and if you're just starting up with this topic I would recommend you to start with this blog .

Creating a Component

To create a web component of your own follow the following steps below:-

1.Create a HTML & JS files:- First of all you'd need to create your HTML and JS files using their respective .html and .js extensions. Along with that, you will also have to link your JavaScript file to HTML using the script tag.

<script src="[REPLACE_WITH_JS_FILE_LOCATION]"></script>

2.Create a class:- Within your JavaScript file you now create a class that will define the functionalities of your web component.
Here's the format of creating a class for your web component:-

class MyComponent extends HTMLElement {
    constructor() {
        super();
        //Add/Initialize the state of our components here
    }
}

3.Attach a Shadow DOM:- Within the constructor, you can now add shadow DOM for your component. This is done in the following way:-

class MyComponent extends HTMLElement {
    constructor() {
        super();

        //Attaching Shadow DOM
        this.attachShadow({mode:'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));

What the last line does is that it takes our component structure defined in a variable named 'template' clones its content and then appends it to the child node of our shadow root element. But for that to work, we need to define a variable named template before our class.

const template = document.createElement('template');
template.innerHTML = `
    <style>
        //Add the required styling for your component here
    </style>
    <div class="[Any_class_name_you_want]" id="[Can_also_give_a_id]">
        //Add the required content here
    </div> `;

class MyComponent extends HTMLElement ....

4.Create & access attributes:- From the HTML we pass in attributes just like we do with the normal HTML tags, but to access them in our JavaScript we use the getAttribute method within the constructor.
HTML code:

<my-component my_attribute="some_value">
</my-component>

JS Code:

class MyComponent extends HTMLElement {
    ...
        ...
        this.attachShadow({mode:'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        this.shadowRoot.querySelector('div').innerText = this.getAttribute('my_attribute');

5.Accessing Functionalities:- To add event listeners or other JavaScript functionality to your custom component you can add an id or class to your template HTML elements defined in step 3 and then access them within your component class.
But make sure that whatever event listeners you add must be defined within the connectedCallback method, because this ensures that the event listeners fires of only when the component is connected to your web page DOM.
To remove the event listeners from our custom component you can call the removeEventListener method within the disconnectedCallback lifecycle method, which makes sure that once the component is removed from the actual DOM.

6.Encapsulate your component class into an HTML tag:- To encapsulate and export our custom elements content, styling, and functionality to our HTML we define the component at the end of our JavaScript file outside the class.

...
window.customElements.define('my-component', MyComponent);

You can now use the tag anywhere in your HTML files and it will be rendered according to how you defined it in the class.