Web Components Tutorial: Framework-Agnostic Reusable UI
Web Components are browser-native technologies that let developers build reusable, encapsulated UI elements that work across frameworks such as React, Angular, Vue, or even plain HTML. Unlike framework-specific components, Web Components rely on standards like Custom Elements, Shadow DOM, HTML Templates, and ES Modules, making them highly portable and future-proof. If you're wondering what are web components, they are essentially custom HTML elements with their own behavior, styling, and lifecycle that can be reused across multiple applications without rewriting code.
A modern web components tutorial typically introduces these core browser APIs before demonstrating how libraries like Lit simplify component creation with reactive properties and templating. Web Components are widely used for design systems, embeddable widgets, cross-framework UI libraries, and gradual frontend migrations. They also integrate well with modern frameworks, including web components with React, which now offers improved support for passing JavaScript properties and handling custom events.
As browser support and tooling continue to improve, Web Components have become a practical choice for building scalable, maintainable, and framework-agnostic user interfaces, particularly for enterprise applications that require reusable components across multiple projects and technology stacks.
What Are Web Components? Tutorial, Features & How to Use Them
What are web components? They're a set of standards built directly into the browser that let you create your own reusable, encapsulated HTML tags, like <my-card> or <super-button>, that behave just like any native element such as <video> or <div>. Critically, web components are not a library or framework you install; they're part of the browser itself.
This is the defining property that makes web components genuinely framework-agnostic: a component you build once works identically whether it's dropped into a React app, a Vue app, an Angular app, or a plain HTML page with no framework at all. The concept dates back to 2011, when it was messy, verbose, and required heavy polyfills, which is largely why React and Vue took over in the years that followed. By 2026, with broad native browser support and better tooling, that gap has closed significantly.
Build an AI-First Career, Master the Complete Skillset
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
AI Forward Deployed Engineer Program
Full-stack engineering, production AI and client-facing consulting
+1000 moreThe Four Core Technologies
Understanding web components starts with the four browser-native technologies they're built on:
| Technology | What It Does |
|---|---|
| Custom Elements | The API for defining your own new HTML tag names with custom behavior |
| Shadow DOM | Encapsulates a component's internal DOM and styles, preventing leaks in or out |
| HTML Templates | The <template> tag, markup that's parsed but not rendered until explicitly cloned |
| ES Modules | Standard JavaScript's native module system, used to package and share components |
Shadow DOM is arguably the most important of the four for real-world use, it's what makes a web component's internal styles and markup genuinely isolated, so a component you drop into any project won't clash with that project's existing CSS, and vice versa.
Building Your First Web Component
Here's a minimal web component built with no libraries at all, just native browser APIs:
Notice this required zero build step, zero framework, and zero dependencies. customElements.define registers the tag with the browser, and from that point on, <greeting-card> behaves like any native HTML element, usable anywhere HTML can appear.
CTA: Build Scalable Frontend Applications
Reusable components are the foundation of maintainable frontend development. Take your frontend skills further with Scaler Academy’s Software & AI Engineering Program and build production-ready applications through hands-on learning.
Web Components Tutorial: Using Lit
Hand-writing raw Custom Elements works, but it gets verbose quickly for anything with real state and reactivity. This is where Lit, Google's ~5KB library, comes in, adding reactive properties and a templating system on top of native Custom Elements without sacrificing the framework-agnostic benefit.
This web components tutorial pattern, a reactive @property, a render() method returning a template literal, will feel immediately familiar to anyone coming from React or Vue, while the compiled output remains a genuine, framework-agnostic Custom Element under the hood. Lit uses Shadow DOM by default for style and DOM encapsulation, though it can be disabled for cases needing top-down theming.
How to Use Web Components With React
How to use web components with React has historically been the trickiest integration story, but 2026 has meaningfully changed that picture. For years, React set all custom element props as string attributes, meaning passing an object or array into a web component required awkward manual workarounds. With React 19, that limitation is resolved: complex data can be passed into a custom element as a real JavaScript property, just like a normal React prop.
A few practical rules make web components with react integrations reliable even beyond this improvement:
-
Use HTML attributes for simple string/number values, and JS properties for objects or arrays
-
Dispatch CustomEvent with { bubbles: true, composed: true } so events cross the Shadow DOM boundary and are visible to React's event handling
-
Add a TypeScript JSX.IntrinsicElements declaration for any custom element used in a TSX file, so the compiler recognises the tag
-
Be aware that React's reconciliation can occasionally reset a web component's internal state if the component unmounts and remounts unexpectedly, test this specifically in migration scenarios
A real-world case documented in 2026: a team migrating an Angular application to React used web components specifically as a bridge, wrapping React components as custom elements so they could run inside the still-live Angular app during an incremental migration, a genuinely practical use of the framework-agnostic promise, not just a theoretical one.
Lightning Web Components: Web Components at Enterprise Scale
Lightning web components (LWC) is Salesforce's own UI framework, and it's worth knowing about specifically because it's one of the largest production validations of the Web Components standard in the enterprise world. Launched in 2019, LWC is built directly on Custom Elements, Shadow DOM, and HTML Templates, layered with modern JavaScript (ES6+).
-
LWC replaced Salesforce's older proprietary Aura Components framework specifically to take advantage of native browser performance rather than a custom abstraction layer
-
Each lightning web components bundle includes an HTML template, a JavaScript class for logic, CSS for styling, and a metadata configuration file, a structure that maps closely to the raw Custom Element pattern shown in Section 3
-
LWC remains under active development in 2026, with an expanding GraphQL API reducing reliance on server-side Apex code, and 'Lightning Out' for embedding LWCs in external, non-Salesforce web apps
-
Salesforce's Lightning Locker adds a security layer on top of standard Web Components, isolating component interactions for safety in a multi-tenant enterprise platform
For any developer wondering whether web components are 'production ready' at real scale, lightning web components is a concrete answer: an entire enterprise SaaS platform's UI layer built on the same standard covered throughout this tutorial.
How Scaler Transformed Careers in Different Fields
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ moreWhen Web Components Make Sense (and When They Don't)
| Good Fit | Poor Fit |
|---|---|
| Design systems shared across multiple frameworks/teams | Apps needing sophisticated state management out of the box |
| Embeddable widgets for third-party sites | Projects heavily reliant on traditional (non-declarative) SSR |
| Framework migration bridges (old → new) | Teams already deeply invested in one framework's ecosystem |
| Long-lived UI elements meant to outlast a framework choice | Small projects where the interop benefit isn't needed |
The honest 2026 picture: Declarative Shadow DOM and React 19's native support have resolved the two biggest historical objections, poor SSR/SEO support and painful React interop. Web components are no longer a niche, framework-free experiment; they're a legitimate, production-proven choice specifically for the scenarios above, while dedicated frameworks remain the better fit for most everyday application development.
CTA: Ready to Build Reusable, Framework-Agnostic UI?
Scaler's Full Stack Program covers modern frontend architecture, component design, and framework interoperability hands-on, with real projects and 1:1 mentorship.
FAQs
Q1. What are web components used for?
Web components are used to build reusable, encapsulated UI elements that work identically across any framework or plain HTML, without depending on React, Vue, or Angular specifically.
Turn Learning into Career Growth
Q2. How do you use web components with React?
To use web components with react, render the custom element like any HTML tag, use properties for complex data (fully supported natively in React 19), and dispatch bubbling, composed CustomEvents for cross-boundary communication.
Q3. What is Lit, and why use it in a web components tutorial?
Lit is a ~5KB library from Google that adds reactive properties and templating on top of native Custom Elements, reducing the boilerplate a raw web components tutorial would otherwise require.
Q4. What are Lightning Web Components?
Lightning web components are Salesforce's UI framework, built directly on the Web Components standard, used to build reusable interface elements across the Salesforce platform.
Q5. How to use web components without a build tool?
You can define a Custom Element directly with plain JavaScript's customElements.define API, no build step, bundler, or framework is required for basic usage.
Q6. Are web components good for server-side rendering?
As of 2026, yes, Declarative Shadow DOM lets the server send full HTML structure, including shadow root markup, before any client JavaScript loads, resolving the historical SSR limitation.
