Web Components with JavaScript

Web components are a way to create custom, reusable HTML elements. Using web components you can create custom HTML elements with JavaScript. Framework/Libraries like ReactJS, VueJS also offer reusable, custom components. But with vanilla JavaScript, we also can create custom components. We also can make our custom elements isolated from other DOM elements.

Three things need to understand to learn Web Components:
Custom Elements: You can create a custom DOM element/tag with a JavaScript APIs. By convention use hyphen to declare a custom elements, for example: <my-element></my-element> . We use hyphen so that it doesn’t mess with other native elements.

Shadow DOM: When you need to create a private, isolated custom element, then we use a set of JavaScript API called Shadow DOM. It also renders separately from the main Document DOM.

HTML Templates: We have a couple of HTML elements that don’t display on the main rendered page. We can render those element contents when we actually need to render those and we also can reuse those contents. Those elements are: <template>, <slot>

Custom Elements

Now let’s see how we can create a custom element. For creating a custom element let’s call define method of customElements API.

customElements.define('my-component', CustomComponent);

Now let’s extends CustomComponent class from HTMLElement to create a custom element.

class CustomComponent extends HTMLElement {
  connectedCallback() {
      this.innerHTML = `<p>Hello Universe</p>`;
  }
}
customElements.define('my-component', CustomComponent);

HTMLElement has four lifecycle hooks. connectedCallback is one of them. It executes every time the element is inserted into the DOM. We can put out markups in it, get dependency data from other components, etc.

Shadow DOM

We also can create isolated components. Isolated components don’t mess with the main DOM. It renders in lite wait DOM called Shadow DOM. In main DOM everything is in a global scope. So conflicts and security issues can happen easily. Shadow DOM is a wrapper of the custom component, it makes the component isolated from other main DOM elements/components. You can attach Shadow DOM in any main DOM elements or custom elements.

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>Hello Universe</p>`;
  }
}
customElements.define('my-component', CustomComponent);

.

HTML Templates

<template> tag contents don’t render in the page. So you can write your contents in it and then clone those nodes with JavaScript in the custom components.

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

    const templateNode = document.getElementById('my-template');
    const templateContent = templateNode.content;

    this.attachShadow({mode: 'open'}).appendChild(
      templateContent.cloneNode(true)
    );
  }
}

customElements.define('my-template', TestComponent);

.