Creating a custom web component in JavaScript

Creating a web component in JavaScript like a Vue component is a straightforward process that involves defining the custom element's tag name, registering it in the browser, and defining its behavior using JavaScript.

Defining the Custom Element Tag

Let's start by defining the custom element's tag name. This will be the identifier used to create instances of the component in your HTML code. For instance, if you want to create a custom element named card-component, you would define it as follows:

<card-component></card-component>

Registering the Custom Element

Once you've defined the custom element's tag name, you need to register it in the browser. This involves creating a customElements.define() method call that specifies the tag name, the component class, and its options. For example, to register the card-component, you would use the following code:

customElements.define('card-component', CardComponent);

Defining the Component Behavior

Now, let's define the card-component behaviour in JavaScript. This involves creating a class that extends from HTMLElement and implementing its lifecycle methods, such as connectedCallback, disconnectedCallback, attributeChangedCallback, and adoptedCallback.

For example, the CardComponent class could look like this:

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

        this.defaults = {
            title: "Card default title",
            content: "Card default content"
        };
    }

    static get observedAttributes() {
        return ["data-title", "data-content"];
    }

    render() {
        this.innerHTML = `
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">${ this.getAttribute("data-title") || this.defaults.title }</h5>
                    <p class="card-text">${ this.getAttribute("data-content") || this.defaults.content }</p>
                </div>
            </div>
        `;
    }

    connectedCallback() {
        this.render();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            this.setAttribute(name, newValue);
            this.render();
        }
    }
}

CardComponent extends from HTMLElement and implements the connectedCallback and attributeChangedCallback lifecycle methods.

The connectedCallback method is called when the custom element is inserted into the DOM, and it's responsible for rendering the component's HTML markup.

The attributeChangedCallback method is called whenever an attribute of the element is changed. This includes adding, removing, modifying, or replacing an attribute. The callback is passed three arguments:

• name of the attribute that changed.
• the attribute's old value.
• the attribute's new value.

Once an attribute is changed, the component HTML will re-render.

Using the Custom Element

To use the custom element in your HTML code, simply add the tag name to your HTML document:

<card-component data-title="The card title" data-content="The card content"></card-component>

This will create an instance of the CardComponent and render it into the DOM. You can also dynamically manipulate the component's attributes using JavaScript:

document.querySelector('card-component').setAttribute('data-title', 'Edited card title');
document.querySelector('card-component').setAttribute('data-content', 'Edited card content');

This code will update the title and the content of the card-component.

Demo

See the Pen Untitled by Stanescu Eduard-Dan (@ZsharE) on CodePen.