Web Components — Create your Library

Am sure you’ve used a complete part of code from the internet, that had all the functionality and worked up the magic you wanted. Well, that must be a component. If you were using it to create a web app, then that’s a web component.

What’s a Web Component?

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Web Components are custom HTML elements that you define. They allow you to create HTML tags that encapsulate specific interface elements or functionalities. Web Components are built upon three core technologies:

• Custom Elements: This API lets you define new types of HTML elements, giving you the power to extend the vocabulary of HTML.
• Shadow DOM: This technology enables you to isolate the internal structure, styles, and behaviour of a component, preventing potential clashes with the rest of your web page.
• HTML Templates: These provide a mechanism to define reusable blocks of HTML markup that can be dynamically instantiated inside your components.

What do we use Web Components for?

But why should I use these web components? Web Components offer a range of advantages for web developers:

• Modularity: Web Components promote a component-driven approach to development. They help you break down your web interfaces into smaller, manageable pieces.
• Reusability: Once you create a Web Component, you can reuse it effortlessly across different projects or even share it with other teams.
• Encapsulation: Using the Shadow DOM, Web Components protect their internal styles and logic from conflicts with external CSS or JavaScript.
• Maintainability: Web Components improve code organization by defining clear boundaries between different parts of your application, making updates and maintenance less complex.

How do/can I use Web Components in my everyday software engineering life?

Web Components have numerous practical applications:

• Design Systems: Create a consistent and reusable UI component library to ensure a streamlined user experience across your applications.
• Application Development: Structure complex applications with well-defined Web Components, making them easier to manage and scale.
• Rapid Prototyping: Experiment quickly with UI ideas thanks to the composable nature of Web Components.
• Sharing Solutions: Package and distribute your Web Components as libraries, promoting collaboration and code reuse.

Let me show you how to use/create this magic

Greet users on any web page — HTML Hello World

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

    // Create Shadow DOM
    const shadowRoot = this.attachShadow({mode: 'open'});

    // Add content
    shadowRoot.innerHTML = `
      <style> 
        p { color: blue; } 
      </style>
      <p>Hello, World from a Web Component!</p>
    `;
  }
}

customElements.define('hello-world', HelloWorld);

That’s all you need. You can host this piece of code as part of your project or separately on the server.

To use it:

// import the file
<script src="./greeting.js"></script>

// on the body where you want to display the greeting
<hello-world></hello-world>

And Voila, that’s all you need. The `<hello-world></hello-world>` is now a web component that can be used anywhere in your code to greet users.

Web component's functionality can get more advanced than this. You can create web components for anything you want to abstract. You can pass data into the web components. Imagine, you wanted to display the user’s name on the greeting then;

<hello-world name="John Doe"></hello-world>

and on the functionality

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.username = parseInt(this.getAttribute('name')) || '';

    // Create Shadow DOM
    const shadowRoot = this.attachShadow({mode: 'open'});

    // Add content
    shadowRoot.innerHTML = `
      <style> 
        p { color: blue; } 
      </style>
      <p>Hello, World from ${this.username}!</p>
    `;
  }
}

customElements.define('hello-world', HelloWorld);

If you don’t want to play around with HTML and CSS, you can use libraries such as Lit and Stencil.js to create cool web components

I have a pagination and Timer web component on this fly repo, you can take a look for advanced web components

So, Can I build my Library with a web component? The answer is yes. Depending on your needs, you can create your library