Building a reusable components: Unleashing the Power of Web Components.

2 min read

Web Components are a set of web platform APIs that allow you to create new custom, reusable, and encapsulated HTML tags to use in web pages and web apps.

When working with Web Components, you can use them in any web project, regardless of the framework or library you are using. They promote re-usability and encapsulation, making it easier to manage and maintain complex web applications.

Choosing between Web Components and popular JavaScript frameworks like React or Angular can depends on various factors such as project requirements, team expertise, and development goals.

How to create your first web component?

In your JavaScript/Typescript file add the following lines.

// Define a custom element 
class SideBar extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
    <ul>
      <li>Inbox</li>
      <li>Sent</li>
      <li>outbox</li>
    </ul>
    `;
  }
}

// Register the custom element
customElements.define("sidebar-element", SideBar);

Import that script file in html file.

    <script type="module" src="script.js"></script>

use your component like:

<sidebar-element></sidebar-element>

Let's build a counter app to demonstrate the power of web components


      class CounterComponent extends HTMLElement {
        constructor() {
          super();
          // Create a shadow root
          this.attachShadow({ mode: "open" });
          // Initial count value
          this.count = 0;
        }

        connectedCallback() {
          this.render();
          this.setupEventListeners();
        }

        render() {
          this.shadowRoot.innerHTML = `
          <style>
            /* Add some styling for the component */
            /* styles will be scoped to this component */
            div {
              font-size: 18px;
              margin: 10px;
            }

            button {
              margin: 0 5px;
              padding: 5px 10px;
              cursor: pointer;
            }
          </style>

          <div>
            <button id="decrement">-</button>
            <span id="count">${this.count}</span>
            <button id="increment">+</button>
          </div>
        `;
        }

        setupEventListeners() {
          // we have to query element from shadowRoot
          const decrementButton = this.shadowRoot.getElementById("decrement");
          const incrementButton = this.shadowRoot.getElementById("increment");
          const countSpan = this.shadowRoot.getElementById("count");

          decrementButton.addEventListener("click", () => {
            this.count--;
            countSpan.textContent = this.count;
          });

          incrementButton.addEventListener("click", () => {
            this.count++;
            countSpan.textContent = this.count;
          });
        }
      }

      // Define the custom element
      customElements.define("counter-component", CounterComponent);

in html file add the following lines

    <counter-component></counter-component>
    <counter-component></counter-component>
    <counter-component></counter-component>

output: