Web Components are a set of built-in browser technologies that allow you to create reusable, custom HTML elements with their own encapsulated styles and logic. Crucially, they are a web standard, meaning they work in any modern browser without needing an external framework like React or Svelte.
The Goal: Truly Universal Components 🧩
For years, JavaScript frameworks like React, Vue, and Angular have provided their own ways of creating components. The problem is that a React component doesn’t work in a Vue app, and vice-versa.
Web Components solve this by providing a standard, framework-agnostic way to create components. A component built as a Web Component can be used anywhere: in a plain HTML file, a WordPress site, or inside any JavaScript framework.
The Three Core Technologies
Web Components are made up of three main technologies that work together:
1. Custom Elements
This is the API that allows you to define your own HTML tags. You can tell the browser that whenever it sees a tag like <my-profile-card>, it should run a specific JavaScript class to control its behavior and content.
2. Shadow DOM
This is the magic of encapsulation. The Shadow DOM allows you to create a hidden, separate DOM tree that is attached to your custom element.
Analogy: A Protective Bubble 🫧 The Shadow DOM is like putting your component inside a protective bubble.
- Styles Don’t Leak Out: CSS you write inside the Shadow DOM only applies to your component.
- Styles Don’t Leak In: Global CSS from the main page won’t accidentally break your component’s styling.
This solves one of the biggest problems in CSS, allowing you to write styles for a component without worrying about unintended side effects.
3. HTML Templates (<template> and <slot>)
These allow you to define a chunk of HTML markup that isn’t rendered immediately but can be cloned and used by your custom element. The <slot> tag acts as a placeholder, allowing you to pass your own content from the main page into your component’s template.
Web Components vs. JavaScript Frameworks
It’s not a battle; they can work together. You can use Web Components inside a React or Svelte application.
- Frameworks often provide more high-level features like advanced state management.
- Web Components offer native browser performance and true, future-proof interoperability.
For creating a universal design system or a set of components that need to work across many different projects and technologies, Web Components are an excellent choice.
