How to Use Web Components: Custom Elements, Shadow DOM and Templates

Web Components are a set of native browser standards (Custom Elements, Shadow DOM and HTML templates) that let you build reusable UI elements like <user-card> without a framework. They work in all modern browsers and can be used inside React, Vue or plain HTML. Below we explain the benefits and show a three-step example: define the element, use it, and enhance it.

Web components are a powerful tool for web developers, allowing for the creation of reusable, encapsulated custom elements. In this article, we will explore how to use web components in your website, providing you with the knowledge to enhance your web design projects with modular, efficient code.

What Are Web Components?

Web components are a set of web platform APIs that allow you to create custom, reusable, and encapsulated HTML elements. They consist of three main technologies:

Custom Elements: Define your own HTML tags.
Shadow DOM: Encapsulate your HTML, CSS, and JavaScript, ensuring it doesn't interfere with the rest of the document.
HTML Templates: Define reusable HTML structures.

Benefits of Using Web Components

Reusability: Create components once and reuse them across your website or even in different projects.
Encapsulation: Keep your styles and behaviors scoped, avoiding conflicts with other parts of your website.
Maintenance: Simplify your codebase by breaking down complex UIs into manageable, reusable pieces.

Planning a new website or improving your current one? We can review your needs and suggest the right approach. Book a free consultation on WhatsApp

How to Use Web Components in Your Website

Step 1: Define a Custom Element

To create a custom element, you need to define a class that extends HTMLElement and use the customElements.define method.

javascript
Copy code
class MyComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .container {
                    background-color: #f9f9f9;
                    padding: 20px;
                    border-radius: 5px;
                }
            </style>
            <div class="container">
                <p>Hello, I am a web component!</p>
            </div>
        `;
    }
}

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

In this example, we define a custom element called my-component with encapsulated styles and HTML.

Step 2: Use the Custom Element

Once defined, you can use your custom element just like any other HTML tag.

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Use Web Components in Your Website</title>
</head>
<body>
    <my-component></my-component>
    <script src="path/to/your/component.js"></script>
</body>
</html>

Include the custom element in your HTML and link to the JavaScript file where it's defined.

Step 3: Enhance with Additional Features

Web components can be extended with additional features such as attributes and events. For example, you can add an attribute to customize the content of the component.

javascript
Copy code
class MyComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .container {
                    background-color: #f9f9f9;
                    padding: 20px;
                    border-radius: 5px;
                }
            </style>
            <div class="container">
                <p></p>
            </div>
        `;
    }

    connectedCallback() {
        this.shadowRoot.querySelector('p').textContent = this.getAttribute('message') || 'Hello, I am a web component!';
    }
}

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

Now, you can use the message attribute to customize the component's content.

html
Copy code
<my-component message="Custom message for my component"></my-component>

Conclusion

Learning how to use web components in your website can greatly improve your development process by making your code more modular and reusable. By following the steps outlined above, you can start incorporating web components into your projects, leading to cleaner and more maintainable code.

Frequently asked questions

Do web components work in all browsers?

Yes. Custom Elements, Shadow DOM and templates are supported in all modern browsers, including Chrome, Firefox, Safari and Edge.

Can I use web components with React or Vue?

Yes. Web components are framework-agnostic, so they can be used inside React, Vue, Angular or plain HTML pages.

When should I use web components instead of a framework?

They suit design systems and widgets shared across different sites or frameworks; full applications usually still benefit from a framework.

A professional website that brings clients

At Sympaweb we design and develop fast, SEO-ready business websites and online stores for clients in Jordan, the Gulf and beyond.

Get a free quote on WhatsApp

Last updated: November 2026