What is a Web Component in HTML: Simple Explanation and Example

A web component in HTML is a reusable custom element that you can create with its own structure, style, and behavior. It lets you build encapsulated parts of a webpage that work like regular HTML tags but are made by you.

How It Works

Think of a web component like a special box you build that has its own rules inside. This box can have its own HTML, CSS, and JavaScript that do not affect the rest of the page. This is called encapsulation.

When you use a web component, you just place its tag in your HTML like any normal tag, but behind the scenes, it runs the code you wrote inside the box. This helps keep your webpage organized and makes it easy to reuse parts without repeating code.

Example

This example shows a simple web component called <hello-world> that displays a greeting with some style.

javascript

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const wrapper = document.createElement('div');
    wrapper.textContent = 'Hello, Web Component!';
    const style = document.createElement('style');
    style.textContent = `div { color: blue; font-weight: bold; font-size: 1.5rem; }`;
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

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

Output

Hello, Web Component! (in bold blue text)

When to Use

Use web components when you want to create reusable parts of a website that can be used in many places without rewriting code. For example, buttons, user profile cards, or custom widgets.

They are great for large projects or teams because they keep code clean and separate. Also, web components work in any modern browser and can be shared across different projects easily.

Key Points

• Web components are custom HTML elements you create yourself.
• They have their own HTML, CSS, and JavaScript inside a shadow DOM.
• They help keep code organized and reusable.
• They work in all modern browsers without extra libraries.

Key Takeaways

Web components let you build reusable custom HTML elements with encapsulated code.

They use shadow DOM to keep styles and scripts separate from the main page.

You can use web components to simplify and organize complex web projects.

They work natively in modern browsers without needing extra tools.