Creating reusable and modular components in modern web development is essential for maintaining clean, scalable, and efficient code. Whether building a simple website or a complex application, web components can simplify your workflow.

Web components allow developers to create custom, reusable HTML elements across different projects and frameworks.

To understand what web components are, you need to understand mainly 3 things:

Custom elements:

Creating custom elements is like creating your HTML tags. What does it mean? 🤯

In an HTML file, you get the same thing each time you use <h1> tag. You know that every time you use that <h1> tag, you'll get the same result by default.

So imagine that you're building a quiz app in which there will be lots of quizzes. Your quizzes will have the same layout and logic: There will be a question and answer options. After completing the quiz, the users' results will be calculated.

So, the only thing that will be different for each quiz will be the topic of the questions and their answers. The main HTML will remain the same.

It would be great and time-saving for you to have a quiz tag, just like you have an <h1> tag in HTML, right?

Using web components, you can create your own quiz element and call it like an HTML tag in your code. It's time-saving, easy to use, and makes the code much readable.

One of the best parts is that if you decide to change one thing on the quiz, for example, if you want to change your layout for all quizzes, you'll only have to update your web component file and boom! All your quizzes will automatically be updated. Amazing!

Here is an example of creating a custom element and how to call it on a HTML file:

class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `<p>Hello, Web Components!</p>`; } } customElements.define('my-element', MyElement); 

You can then use<my-element></my-element>in your body tag of your HTML.

The Shadow DOM

Shadow DOM is part of the web components standard that allows you to encapsulate a component's internal structure and styling. When we create custom web components, we use them like HTML tags. But what happens if we have multiple similar web components on the same page? Without encapsulation, styles from one component might interfere with others or the rest of the page. Shadow DOM prevents this by ensuring that each component's styles and structure are isolated and won't affect anything outside the component, and vice versa.

Why is it important?

• In this way, the styles and structure inside a component are scoped only to that component. So, the external styles (css of the rest of the page) won't affect the component.
• Styles of the component won't affect the rest of the page.

So why you should use web components?

Keeps styles and scripts isolated from the rest of the page
Once created, you can use web components across different projects and contexts.
It works with any framework or vanilla JavaScript.