What Is a Web Component?

A Web Component is a browser standard for creating reusable HTML elements that work natively and do not depend on any framework. It consists of three main technologies:

• Custom Elements: define your own HTML tag (for example <greeting-card>) with customElements.define().
• Shadow DOM: isolates the element's internal structure and styles from the rest of the page.
• HTML Templates: reusable markup is defined with <template> and <slot>.

How it differs from a Vue component

Vue components work only inside a Vue application. A Web Component can be used in a plain HTML page, in a React or Angular application, or with no framework at all. Vue offers the defineCustomElement function to turn a component into a Web Component (see What Is a Vue Custom Element?).

import { defineCustomElement } from 'vue';

// Turn a Vue component into a Web Component class
const GreetingCard = defineCustomElement({
  props: { name: String },
  template: `<p class="card">Hello, {{ name }}!</p>`,
  styles: [
    `.card { padding: 12px 16px; border-radius: 8px; background: #28e98c; color: #1f1f1f; }`,
  ],
});

customElements.define('greeting-card', GreetingCard);

// Now it can be used like any HTML tag
document.body.innerHTML += '<greeting-card name="World"></greeting-card>';

When to choose it

• When a component must be shared across projects built with different technologies (a design system, an embeddable widget).
• When styles must be completely isolated from the page.

Inside a single Vue application, regular Vue components are more practical: you get the full benefit of Vue's reactivity, slots and developer tools.