FRONT END

Home › Glossary › Front End· 449 ·

Web Components

\\web kom-poh-nents\\n.

Filed underFront EndSoftware EngineeringArchitecture

In brief · quick answer

Web Components are a set of browser-native APIs (Custom Elements, Shadow DOM, HTML Templates) for creating reusable, encapsulated custom HTML elements that work across any framework or no framework at all.

§ 1 Definition

Web Components is a suite of three browser technologies that allow developers to create reusable custom elements with encapsulated styles and behavior, independent of any JavaScript framework. They are native to the browser and work in any modern browser without libraries. The three core technologies are: Custom Elements (APIs to define new HTML element types with lifecycle callbacks), Shadow DOM (encapsulated DOM tree and styles that cannot be penetrated by external CSS or JavaScript), and HTML Templates (the `<template>` and `<slot>` elements for defining declarative markup fragments that are not rendered until instantiated). Web Components solve the problem of reusable component interoperability across frameworks. A web component built with vanilla JavaScript can be used in React, Vue, Angular, Svelte, or a plain HTML page without modification.

§ 2 Custom Elements Lifecycle

Custom Elements are defined by extending the `HTMLElement` class and registering the element with `customElements.define()`. The browser calls four lifecycle callbacks: `connectedCallback` (when the element is inserted into the DOM), `disconnectedCallback` (when removed), `attributeChangedCallback` (when a watched attribute changes), and `adoptedCallback` (when moved to a new document). Observing specific attributes for changes requires a static `observedAttributes` getter.

§ 3 Shadow DOM Encapsulation

Shadow DOM provides style and DOM encapsulation. Attaching a shadow root to an element creates a separate DOM tree that is scoped: CSS selectors from the main document do not leak into the shadow tree, and styles defined inside the shadow tree do not leak out. This solves the CSS specificity and naming collision problems that plague large applications. The `:host` pseudo-class targets the custom element itself from within the shadow tree, and `<slot>` elements allow projecting light DOM content into the shadow tree.

§ 4 Note

Common misunderstanding: Web Components do not replace frameworks like React or Vue. They solve a specific problem (framework-agnostic reusable elements with encapsulation) but lack the reactivity, state management, and developer experience of modern frameworks. Another misconception: Web Components have poor browser support. They are supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2020. The real limitation is that building complex applications with only Web Components is significantly more verbose and error-prone than using a framework.

§ 5 In code

```javascript
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button { padding: 8px 16px; background: blue; color: white; border: none; border-radius: 4px; }
      </style>
      <button><slot></slot></button>
    `;
  }
}

customElements.define('my-button', MyButton);
```
```html
<my-button>Click me</my-button>
```

§ 6 Common questions

Q. Can I use Web Components in React?: A. Yes. React supports rendering web components as HTML elements. You pass props as HTML attributes (strings) or via refs for complex types. Some React-specific patterns (event bubbling, complex prop types) require workarounds.
Q. Are Web Components ready for production?: A. Yes. Major companies like YouTube, GitHub, Adobe, and Salesforce use Web Components in production. They are especially useful for design systems that need to work across multiple frameworks.

Key takeaways

Web Components are browser-native APIs (Custom Elements + Shadow DOM + Templates) for reusable encapsulated elements.
They work across any framework or no framework, making them ideal for cross-framework design systems.
Web Components are not a framework replacement. They lack built-in reactivity, state management, and data binding.

How Atomic Glue helps

Atomic Glue uses Web Components strategically for design system elements that must work across multiple client frameworks. When we build a component library that needs to render correctly in React, Vue, and static HTML contexts, Web Components provide the interoperability layer. We evaluate whether Web Components or a framework-specific approach better serves each client's architecture. Our website development services include cross-framework component strategy.

Get in touch

# Web Components

Category: Front End (also: Software Engineering, Architecture)

Author: Atomic Glue Development Team

## Definition

## Custom Elements Lifecycle

## Shadow DOM Encapsulation

## Note

## In code

## Common questions
Q: Can I use Web Components in React?
A: Yes. React supports rendering web components as HTML elements. You pass props as HTML attributes (strings) or via refs for complex types. Some React-specific patterns (event bubbling, complex prop types) require workarounds.
Q: Are Web Components ready for production?
A: Yes. Major companies like YouTube, GitHub, Adobe, and Salesforce use Web Components in production. They are especially useful for design systems that need to work across multiple frameworks.

## Key takeaways

Web Components are browser-native APIs (Custom Elements + Shadow DOM + Templates) for reusable encapsulated elements.
They work across any framework or no framework, making them ideal for cross-framework design systems.
Web Components are not a framework replacement. They lack built-in reactivity, state management, and data binding.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/web-components