What Are Web Components?
Learn what Web Components are — Custom Elements, Shadow DOM, and Templates — and why they work across any framework.
Expected Interview Answer
Web Components are a set of native browser APIs — Custom Elements, Shadow DOM, and HTML Templates — that together let you define a reusable, encapsulated HTML tag with its own markup, styles, and behavior, usable in any framework or none at all.
Custom Elements lets you register a new tag name (e.g. `<info-card>`) backed by a JavaScript class extending HTMLElement, with lifecycle hooks like `connectedCallback` and `attributeChangedCallback` that run as the element enters the DOM or its attributes change. Shadow DOM gives that element an encapsulated internal tree so its styles never leak out and outer page CSS never leaks in. HTML `<template>` lets you define inert markup that is cloned and stamped into the shadow root efficiently, rather than being parsed and rendered until explicitly instantiated. Because these are native browser standards rather than a framework abstraction, a Web Component built once works unmodified inside React, Vue, Angular, or a plain HTML page, which is the main appeal for building framework-agnostic design-system primitives — though interop details like passing complex data (vs only string attributes) and event handling conventions still require care at framework boundaries.
- Framework-agnostic — works in React, Vue, Angular, or plain HTML unmodified
- True style/markup encapsulation via native Shadow DOM, no CSS-in-JS runtime needed
- Native lifecycle hooks for reacting to DOM insertion and attribute changes
- Templates enable efficient, inert markup cloning without upfront parsing cost
AI Mentor Explanation
Web Components are like a standardized piece of equipment — say, a regulation stump — that any league in the world can use without modification, because it is built to a universal spec rather than one tournament’s house rules. It arrives self-contained: its material, dimensions, and behavior under impact are all built in, not assembled fresh at each ground. Any stadium plugs it in and it behaves identically. That build-once-use-anywhere-unmodified principle is exactly what makes Web Components framework-agnostic.
Step-by-Step Explanation
Step 1
Define the class
Extend HTMLElement with lifecycle methods like connectedCallback and attributeChangedCallback.
Step 2
Attach shadow DOM
Call attachShadow to give the element its own encapsulated markup and style scope.
Step 3
Use a template
Define an inert <template> with the internal markup, cloned into the shadow root efficiently.
Step 4
Register the tag
Call customElements.define("my-tag", MyClass) so the browser recognizes and upgrades the element.
What Interviewer Expects
- Ability to name and explain the three core specs: Custom Elements, Shadow DOM, Templates
- Understanding of lifecycle callbacks and when each fires
- Awareness that Web Components are framework-agnostic by design
- Mention of practical interop caveats (attributes vs complex props, event conventions)
Common Mistakes
- Treating Web Components as a framework rather than a set of native browser APIs
- Forgetting that custom element attributes are strings, requiring careful prop/attribute reflection for complex data
- Not mentioning Shadow DOM when asked what makes Web Components encapsulated
- Assuming Web Components automatically replace the need for any framework at scale
Best Answer (HR Friendly)
“Web Components are a set of built-in browser features that let you create your own custom HTML tags with their own look and behavior baked in. Because they are a browser standard rather than tied to one framework, a component you build once can be dropped into a React app, a Vue app, or a plain HTML page and it just works the same way everywhere.”
Code Example
const template = document.createElement('template')
template.innerHTML = `
<style>span { font-weight: bold; color: darkorange; }</style>
<span></span>
`
class UserBadge extends HTMLElement {
static get observedAttributes() { return ['name'] }
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' })
shadow.appendChild(template.content.cloneNode(true))
this._span = shadow.querySelector('span')
this._render()
}
attributeChangedCallback() { this._render() }
_render() {
if (this._span) this._span.textContent = this.getAttribute('name') || 'Guest'
}
}
customElements.define('user-badge', UserBadge)
// <user-badge name="Ravi"></user-badge>Follow-up Questions
- How do you pass complex data (not just strings) into a Web Component?
- How do Web Components handle events fired from inside a shadow root?
- What is the difference between attributeChangedCallback and observedAttributes?
- How would you integrate a Web Component inside a React application?
MCQ Practice
1. Which three specs together make up Web Components?
Web Components are built from Custom Elements, Shadow DOM, and HTML Templates working together.
2. What must be called to register a new custom element tag?
customElements.define(tagName, Class) registers the class as the behavior for that tag name.
3. Why are Web Components considered framework-agnostic?
Because the APIs are native to the browser, the same component works unmodified across frameworks.
Flash Cards
What three specs make up Web Components? — Custom Elements, Shadow DOM, HTML Templates.
How do you register a custom tag? — customElements.define("tag-name", ClassExtendingHTMLElement).
What fires when an observed attribute changes? — attributeChangedCallback, for names listed in observedAttributes.
Why are Web Components portable across frameworks? — They are native browser standards, not a framework-specific abstraction.