Create reusable HTML tags with encapsulated behavior using ES6 classes that extend HTMLElement. Register them with customElements.define() and use them like native elements.
Encapsulate your component's markup and styles so they don't leak out or get affected by the outside page. True isolation with attachShadow().
Define inert DOM fragments with <template> and compose content with <slot>. Build flexible, declarative component APIs.
Web Components work with React, Vue, Angular, Svelte, or vanilla JS. They're a browser standard — write once, use everywhere, no dependencies needed.
Web Components are a set of browser-native APIs that let you create reusable, encapsulated HTML elements. They consist of Custom Elements (define new tags), Shadow DOM (style & markup encapsulation), and Templates & Slots (inert DOM & content projection). They work across all modern browsers without any framework.
Create a class that extends HTMLElement (or a specific element like HTMLButtonElement), then call customElements.define('my-element', MyElement). The tag name must contain a hyphen. Use lifecycle callbacks like connectedCallback(), disconnectedCallback(), and attributeChangedCallback() to react to changes.
Yes. Web Components are browser standards and integrate with React, Vue, Angular, Svelte, and others. React has full support via custom element refs. Vue and Angular handle them natively. They're ideal for design systems and shared component libraries that need to work across different technology stacks.