Web Components Basics

Web Components are a set of native browser APIs that let you build your own custom, reusable HTML elements — things like <my-tabs> or <user-card> — that encapsulate their own markup, styling, and behavior. Unlike a React component or a Vue component, a Web Component is not tied to any particular framework: it works the same way in plain HTML, in a React app, in a Vue app, or anywhere else, because it is built directly on browser standards rather than a library.

This makes Web Components especially useful for design systems and shared UI libraries that need to work across teams using different frontend frameworks, or across an organization that has not standardized on one framework at all.

Why it matters

Web components let you define your own HTML elements, with their own markup and styles that do not leak in or out, using only what the browser provides. They work in any framework or with none, which is why design systems at large companies are often built on them. They also explain ideas, such as components and encapsulation, that React and Vue borrow.

The Three Core Technologies

"Web Components" is really an umbrella term for three separate browser specifications that are typically used together.

• Custom Elements — the API (customElements.define()) that lets you register a new HTML tag name backed by a JavaScript class, with its own lifecycle callbacks.
• Shadow DOM — an encapsulated, isolated DOM subtree attached to an element; CSS and querySelector calls from outside cannot accidentally reach into it, and its internal styles cannot leak out.
• HTML Templates — the <template> tag, which holds inert markup that is parsed by the browser but not rendered until you clone it into the page with JavaScript, making it an efficient stamp for repeated structure.

Defining a Custom Element

You create a custom element by extending HTMLElement (or a built-in element type), then registering it with customElements.define('tag-name', ClassName). Custom element tag names must contain a hyphen (e.g. user-card, not usercard) specifically so the browser can distinguish them from current and future standard HTML tags. Lifecycle callbacks like connectedCallback() run automatically when the element is inserted into the page.

Why This Matters for Framework-Agnostic UI

Because a registered custom element behaves like any other native HTML tag, you can drop <user-card> into a static HTML page, a React JSX tree, or an Angular template, and it will render and function identically in all three — the browser handles it directly, with no adapter code required. This is why component libraries aimed at multiple teams (for example, a company-wide design system) are increasingly built as Web Components rather than framework-specific components.

Example

<!-- index.html -->
<user-card name="Asha Patel" role="Frontend Engineer"></user-card>

<script>
  class UserCard extends HTMLElement {
    connectedCallback() {
      const name = this.getAttribute('name');
      const role = this.getAttribute('role');

      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>
          .card { border: 1px solid #ccc; border-radius: 8px; padding: 12px; font-family: sans-serif; }
          .name { font-weight: bold; }
        </style>
        <div class="card">
          <div class="name">${name}</div>
          <div class="role">${role}</div>
        </div>
      `;
    }
  }

  customElements.define('user-card', UserCard);
</script>

The page renders a bordered, rounded card showing "Asha Patel" in bold above "Frontend Engineer." The card's internal .card and .name CSS classes are scoped inside the Shadow DOM, so they never clash with any .card or .name class defined elsewhere on the page.

Exercise

Define a custom element named hello-card. It should attach an open shadow root and render a paragraph that reads Hello, followed by the value of its name attribute, in blue text styled inside the shadow DOM.

Expected result: the page shows Hello, Asha in blue, and the ordinary paragraph below it keeps its default colour.

<hello-card name="Asha"></hello-card>
<p>This paragraph is outside the component.</p>

<script>
  class HelloCard extends HTMLElement {
    connectedCallback() {
      // TODO: attach an open shadow root
      // TODO: set its innerHTML to a style rule and a paragraph using the name attribute
    }
  }

  // TODO: register the element under the name "hello-card"
</script>

<hello-card name="Asha"></hello-card>
<p>This paragraph is outside the component.</p>

<script>
  class HelloCard extends HTMLElement {
    connectedCallback() {
      const shadow = this.attachShadow({ mode: "open" });
      const name = this.getAttribute("name");
      shadow.innerHTML = "<style>p { color: blue; }</style><p>Hello, " + name + "</p>";
    }
  }

  customElements.define("hello-card", HelloCard);
</script>

Quick quiz

Interview questions