Web Components: Build UI Kits for all UI Frameworks

Hi! My name is Andrew Maksimchenko 👨🏻💻 I have over 10 years of versatile professional experience, taking on diverse roles such as Solution Architect, Lead Software Developer, IT Jury Member, Mentor, and more. Over the years, I’ve worked deeply with modern and legacy frontend technologies and dedicated a lot of time to understanding how to build reusable UIs that work across all frameworks. That journey eventually led me to distill everything I’ve learned into a comprehensive and best-selling course on Udemy about Web Components.And in this article, I’d like to share a valuable part of my expertise about the power and beauty of this Web Components API, which allows you to build native, framework-agnostic, reusable, and scalable dependency-free UI elements with ZERO dependencies. Hi! My name is Andrew Maksimchenko 👨🏻💻 I have over 10 years of versatile professional experience, taking on diverse roles such as Solution Architect, Lead Software Developer, IT Jury Member, Mentor, and more. Andrew Maksimchenko 👨🏻💻 10 years professional experience Solution Architect Lead Software Developer, IT Jury Member, Mentor Over the years, I’ve worked deeply with modern and legacy frontend technologies and dedicated a lot of time to understanding how to build reusable UIs that work across all frameworks. That journey eventually led me to distill everything I’ve learned into a comprehensive and best-selling course on Udemy about Web Components. modern legacy frontend reusable UIs across all frameworks Udemy Web Components And in this article, I’d like to share a valuable part of my expertise about the power and beauty of this Web Components API, which allows you to build native, framework-agnostic, reusable, and scalable dependency-free UI elements with ZERO dependencies. valuable part power beauty Web Components API, Web Components API build native, framework-agnostic, reusable, scalable dependency-free UI elements ZERO dependencies. Let’s get down to it! Opening Hook Imagine you’re building a house… You have walls, windows, and doors — each built separately, but designed to fit perfectly together. This is similar to how modern Frontend-Development works, too. Developers create individual pieces — known as components — that work together to build an application. walls windows doors separately fit perfectly together Frontend-Development components work together to build an application BUT HERE’S THE KICKER! – We realize that NOT ALL pieces easily fit into this house, let alone other houses. HERE’S THE KICKER! – NOT ALL pieces easily fit into this house, let alone other houses. The same issue can arise in the Web World — UI components we build will NOT perfectly fit into every Web Application, right? Web World UI components will NOT perfectly fit Web Application Some of them are firmly tied to specific frameworks, while others rely heavily on unique styles or scripts, causing numerous conflicts and breaking remaining functionality! specific frameworks others unique styles or scripts numerous conflicts breaking remaining functionality Moreover, let’s be real: Frontend Development today is kind of a mess… Frontend Development You’ve got React. Vue. Angular. Svelte. Solid. Astro. Qwik. Plenty of them… React Vue Angular Svelte Solid Astro Qwik. Each one is powerful. Each one has a loyal community. powerful loyal community And yet… Each one locks you into their ecosystem and comes with numerous technical challenges and issues 🫠 locks you technical challenges issues They don’t talk to each other. Worse, they aren’t natively understood by browsers until they’re transpiled down to pure JavaScript: don’t talk to each other aren’t understood browsers transpiled down JavaScript NOW. What happens if you want to: Build components that work across ANY framework — or with none at all? Create UI Kits & Libraries and easily reuse them anywhere across all types of JavaScript projects — with ZERO dependencies? Or, after all, let multiple UI frameworks (like React, Angular, Svelte) co-exist natively in a single app in real time — in complete synchronization and isolation from each other? Build components that work across ANY framework — or with none at all? components work across ANY framework none at all Create UI Kits & Libraries and easily reuse them anywhere across all types of JavaScript projects — with ZERO dependencies? UI Kits & Libraries reuse anywhere all types of JavaScript projects ZERO dependencies? Or, after all, let multiple UI frameworks (like React, Angular, Svelte) co-exist natively in a single app in real time — in complete synchronization and isolation from each other? multiple UI frameworks React Angular Svelte natively natively single app real time synchronization isolation You might assume that’s impossible. Well, actually, it’s not! All of this becomes possible with the Web Components API — the universal building blocks of the web, designed to fit into any project (1), anywhere (2), with ease (3). All of this becomes possible with the Web Components API — the universal building blocks of the web, designed to fit into any project (1), anywhere (2), with ease (3). Web Components API web any project anywhere ease Meet the Web Components API — The Secret Weapon of Modern Frontend Meet the Web Components API — The Secret Weapon of Modern Frontend And the best part – they are natively supported by all modern browsers — NO frameworks, NO extra dependencies, NO hassle 💪🏼 natively all modern browsers NO frameworks NO frameworks NO extra dependencies NO extra dependencies NO hassle NO hassle 💪🏼 Academically speaking, Web Components are a suite of web platform technologies that enable developers to create custom, reusable HTML elements with encapsulated functionality and styling. Web Components are a suite of web platform technologies that enable developers to create custom, reusable HTML elements with encapsulated functionality and styling. Web Components web platform technologies custom, reusable HTML elements encapsulated functionality styling But in simple words: Web Components isolate HTML, CSS, and JavaScript from the rest of the world, ensuring they neither leak out, nor affect other parts of your app. Web Components isolate HTML, CSS, and JavaScript from the rest of the world, ensuring they neither leak out, nor affect other parts of your app. Web Components isolate HTML CSS JavaScript rest of the world, leak out affect other parts And eventually, you can easily integrate them as regular HTML elements into various frontend projects. regular HTML elements regular HTML elements Challenges Web Components Solve Challenges Web Components Solve There’ve been a bunch of web challenges that the Web Components emerged to address. If you’ve already worked with web applications, they should definitely ring a bell to you: web challenges Web Components web applications Code Duplication & Maintenance Encapsulation & Isolation of HTML, CSS, JS Interoperability Across Frameworks Complexity & Performance Future-Proofing Code Duplication & Maintenance Code Duplication & Maintenance Encapsulation & Isolation of HTML, CSS, JS Encapsulation & Isolation of HTML, CSS, JS Interoperability Across Frameworks Interoperability Across Frameworks Complexity & Performance Complexity & Performance Future-Proofing Future-Proofing Web Components were designed to solve exactly these challenges and usher us into a new era of frontend development. They are not a trend or a framework that could become outdated in a few years. They are already supported by all modern browsers (even older ones with polyfills) and will continue to be a core part of the web's evolution in the future. Web Components solve usher frontend development not a trend a framework outdated all modern browsers polyfills core part 💡 The core idea: Write once, use everywhere! 💡 The core idea: Write once, use everywhere! Write once, use everywhere Write once, use everywhere Amazing Fact But here’s the irony: Web Components aren’t new! DID YOU KNOW THAT? irony DID YOU KNOW THAT? In fact, our browsers have already been secretly using the Web Components API for years under the hood in a bunch of their native HTML Elements, which you use a lot daily, like , , , , and many more! browsers Web Components API native HTML Elements you use a lot daily By default, if you inspect any of these elements in your browser’s Dev Tools, you’ll be surprised to find… nothing special. You won’t see any Shadow DOM, no template markup, no fancy component structure. Why? browser’s Dev Tools nothing special won’t see any Shadow DOM template markup component structure Because most browsers hide internal implementations of built-in components by default: hide internal implementations To peek behind the curtain and enable this feature for all native HTML Elements, go to your browser and: enable all native HTML Elements Open Chrome DevTools Click the ⚙️ (Settings) icon in the top-right corner. Go to the “Preferences” tab Under the “Elements” section, check ✅ “Show user agent shadow DOM” Open Chrome DevTools Chrome DevTools Click the ⚙️ (Settings) icon in the top-right corner. ⚙️ (Settings) Go to the “Preferences” tab “Preferences” Under the “Elements” section, check ✅ “Show user agent shadow DOM” “Elements” “Show user agent shadow DOM” Now, when you inspect native elements like or , you’ll see the browser’s own Shadow DOM structure — built with the same Web Components technology you can use yourself. Pretty cool, right? browser’s own Shadow DOM structure Web Components Web Components Structure Web Components Structure Web Components are built upon 3️⃣ core technologies: Web Components Web Components 3️⃣ core technologies Custom Elements Shadow DOM and HTML Template Plus, a versatile feature called Slots. Custom Elements Custom Elements Shadow DOM Shadow DOM and HTML Template HTML Template Plus, a versatile feature called Slots. Plus Slots . Earlier, there was also another core feature ‒ HTML Imports used to load one HTML document into another HTML document. But now it’s deprecated everywhere. core feature HTML Imports deprecated Below, on the right of the screen, you can see an example of a simple Web Component utilizing all these core features at once: Web Component Web Component core features Now, let’s break down what makes each of these so game-changing! game-changing Shadow DOM — True HTML & Style Isolation Shadow DOM — True HTML & Style Isolation Remember when some global CSS from a library in the node_modules ruined your UI elements’ styling in the project? global CSS library node_modules UI elements’ styling The Shadow DOM puts an end to that chaos! It gives every component its own private Shadow DOM tree. Shadow DOM chaos own private Shadow DOM tree private Shadow DOM tree private Shadow DOM tree Styles and layout inside are encapsulated — totally protected from the outside world: Styles Styles Styles layout layout layout encapsulated encapsulated protected protected outside This means: NO more CSS conflicts! NO more unexpected side effects! NO more bleeding styles! NO more CSS conflicts! NO CSS conflicts NO more unexpected side effects! NO unexpected side effects NO more bleeding styles! NO bleeding styles Custom Elements — Define Your Own HTML Tags — Define Your Own HTML Tags At the very heart ♥️ of Web Components, we have exceptionally elegant Custom Elements. Web Components Custom Elements They allow you to create your own HTML tags — with behavior, styling, and business logic baked in. own HTML tags own HTML tags behavior styling logic With Custom Elements, you gain the power and flexibility to your elements through: Custom Elements power flexibility Lifecycle hooks: connectedCallback — when the element is mounted to the DOM; disconnectedCallback — when the element is UNmounted from the DOM. attributeCallbackChanges — when the element attributes get updated in the DOM and others! Custom properties and attributes Inheritance & Composition Customized Styling Custom Events Data bindings and a lot more! Lifecycle hooks: connectedCallback — when the element is mounted to the DOM; disconnectedCallback — when the element is UNmounted from the DOM. attributeCallbackChanges — when the element attributes get updated in the DOM and others! Lifecycle connectedCallback — when the element is mounted to the DOM; disconnectedCallback — when the element is UNmounted from the DOM. attributeCallbackChanges — when the element attributes get updated in the DOM and others! connectedCallback — when the element is mounted to the DOM; connectedCallback mounted disconnectedCallback — when the element is UNmounted from the DOM. disconnectedCallback UNmounted attributeCallbackChanges — when the element attributes get updated in the DOM attributeCallbackChanges attributes get updated and others! Custom properties and attributes Custom properties attributes Inheritance & Composition Inheritance & Composition Customized Styling Customized Styling Custom Events Custom Events Data bindings Data bindings and a lot more! In short: You get full control over your frontend component’s architecture, behavior, and look-and-feel, with ZERO external library needed! You get full control over your frontend component’s architecture, behavior, and look-and-feel, with ZERO external library needed! full control ZERO external library needed It’s like building your own React components — but entirely browser-native 😅 Plus, you’ll be able to use them in ANY other framework and library like Angular, Svelte, Vue, Stencil, Qwik, and others! React browser-native browser-native ANY other framework ANY library Angular Svelte Vue Stencil Qwik HTML Templates — Reusable DOM Trees on Steroids HTML Templates — Reusable DOM Trees on Steroids HTML Templates are your tool for defining markup once and reusing it anywhere. HTML Templates markup once once reusing it anywhere anywhere Think of them like blueprint components — hidden and inert by default, but ready to clone and inject dynamically. blueprint hidden hidden inert inert ready to clone inject dynamically dynamically Paired with Shadow DOM and Custom Elements, these HTML Templates allow you to build truly dynamic UIs that are: Shadow DOM Custom Elements HTML Templates dynamic UIs Lightweight Reusable Declarative Composable Fully native Lightweight Lightweight Reusable Reusable Declarative Declarative Composable Composable Fully native Fully native They also play nicely with advanced tools like Document Fragments and custom styling strategies. Document Fragments Document Fragments custom styling 🎭 Slots — Content Projection, Supercharged 🎭 Slots — Content Projection, Supercharged Need to let other developers insert content into your component from outside? insert content Enter Slots — the built-in solution for Content Projection. Slots Slots Content Projection Content Projection Slots make your component APIs much more flexible, powerful, and elegant. Slots Slots flexible powerful elegant They come with a bunch of features like named slots, nested slots, multi-level slots, change tracking, and more! named slots nested slots multi-level slots change tracking This Content Projection mechanism operates on the principle of Separation of Concerns, allowing developers to decouple one component’s logic and content from the other. Content Projection Separation of Concerns Separation of Concerns Separation of Concerns decouple logic content UI Frameworks with Web Components UI Frameworks with Web Components But hey! DID YOU KNOW THAT? Many popular Frontend Frameworks, such as Angular, Svelte, Vue, Lit, and others, have already integrated the Web Components API into their ecosystems! DID YOU KNOW THAT? DID YOU KNOW THAT? Frontend Frameworks, Angular Angular Angular Svelte Svelte Svelte Vue Vue Vue Lit Lit Lit already Web Components API ecosystems! For instance, 🍏 Vue Provides a shadowRoot: true property that allows for manipulating the Shadow DOM and encapsulating styles: Vue provides an official @vue/web-component-wrapper for exporting components as Custom Elements Supports props/attributes, slots, and event emission in native Web Component format 🍊 Svelte Offers a customElement: true compiler option to build native Custom Elements Supports Shadow DOM and Slots natively when compiling to Web Components Integrates Form-Associated Elements with Element Internals API 🍒 Angular Employs the Shadow DOM for encapsulation Supports consuming Custom Elements out of the box Easily integrates Web Components into Angular templates 🍏 Vue Provides a shadowRoot: true property that allows for manipulating the Shadow DOM and encapsulating styles: Vue provides an official @vue/web-component-wrapper for exporting components as Custom Elements Supports props/attributes, slots, and event emission in native Web Component format 🍏 Vue Vue Provides a shadowRoot: true property that allows for manipulating the Shadow DOM and encapsulating styles: Vue provides an official @vue/web-component-wrapper for exporting components as Custom Elements Supports props/attributes, slots, and event emission in native Web Component format Provides a shadowRoot: true property that allows for manipulating the Shadow DOM and encapsulating styles: shadowRoot: true Shadow DOM Vue provides an official @vue/web-component-wrapper for exporting components as Custom Elements Vue @vue/web-component-wrapper Custom Elements Supports props/attributes, slots, and event emission in native Web Component format props/attributes slots event emission Web Component 🍊 Svelte Offers a customElement: true compiler option to build native Custom Elements Supports Shadow DOM and Slots natively when compiling to Web Components Integrates Form-Associated Elements with Element Internals API 🍊 Svelte Svelte Offers a customElement: true compiler option to build native Custom Elements Supports Shadow DOM and Slots natively when compiling to Web Components Integrates Form-Associated Elements with Element Internals API Offers a customElement: true compiler option to build native Custom Elements customElement: true Custom Elements Supports Shadow DOM and Slots natively when compiling to Web Components Shadow DOM Slots Web Components Integrates Form-Associated Elements with Element Internals API Form-Associated Elements Element Internals API 🍒 Angular Employs the Shadow DOM for encapsulation Supports consuming Custom Elements out of the box Easily integrates Web Components into Angular templates 🍒 Angular Angular Employs the Shadow DOM for encapsulation Supports consuming Custom Elements out of the box Easily integrates Web Components into Angular templates Employs the Shadow DOM for encapsulation Shadow DOM Supports consuming Custom Elements out of the box Custom Elements Easily integrates Web Components into Angular templates Web Components templates Of course, this list isn’t complete. Many other modern frameworks and libraries, and even older ones — can consume Web Components. The beauty behind them is that they aren’t tied to any framework, making them the perfect glue for building interoperable, future-proof UI across diverse tech stacks. frameworks libraries consume Web Components aren’t tied to any framework interoperable, future-proof UI When You’ll Want to Use Web Components Web Components shine in scenarios where traditional UI frameworks hit their limits. You might need them when: Web Components UI frameworks You’re a Frontend Engineer (Angular, React, Svelte, Vue, etc.) looking to build framework-agnostic components that work everywhere — even outside your current stack. You’re developing or maintaining a Design System, UI Kit, or Component Library and want to ship it once, then reuse it across multiple projects or teams. You’re an Architect implementing Micro-Frontend architectures or monorepos, and you need solid UI isolation and cross-team compatibility. You’re a Full-stack / Backend Developer working with: SSR frameworks like Next.js, Nuxt.js, or Angular Universal Template-based stacks like JSP, Razor/ASP.NET, or PHP — where you still want a dynamic, reusable UI without full framework coupling You’re bridging between the old and new tech stack. For instance, you’re integrating the features from a legacy UI framework (like Backbone, AngularJS, Knockout) into your modern projects, OR vice versa. You’re a Frontend Engineer (Angular, React, Svelte, Vue, etc.) looking to build framework-agnostic components that work everywhere — even outside your current stack. Frontend Engineer framework-agnostic components You’re developing or maintaining a Design System, UI Kit, or Component Library and want to ship it once, then reuse it across multiple projects or teams. Design System, UI Kit, or Component Library You’re an Architect implementing Micro-Frontend architectures or monorepos, and you need solid UI isolation and cross-team compatibility. Architect Micro-Frontend architectures monorepos You’re a Full-stack / Backend Developer working with: SSR frameworks like Next.js, Nuxt.js, or Angular Universal Template-based stacks like JSP, Razor/ASP.NET, or PHP — where you still want a dynamic, reusable UI without full framework coupling Full-stack / Backend Developer SSR frameworks like Next.js, Nuxt.js, or Angular Universal Template-based stacks like JSP, Razor/ASP.NET, or PHP — where you still want a dynamic, reusable UI without full framework coupling SSR frameworks like Next.js, Nuxt.js, or Angular Universal SSR frameworks Template-based stacks like JSP, Razor/ASP.NET, or PHP — where you still want a dynamic, reusable UI without full framework coupling Template-based stacks You’re bridging between the old and new tech stack. For instance, you’re integrating the features from a legacy UI framework (like Backbone, AngularJS, Knockout) into your modern projects, OR vice versa. bridging old new features legacy modern Final Thoughts Final Thoughts As you see, Web Components aren’t just another tool in the frontend toolbox — they’re a native, stable, and scalable foundation for building modern web applications. They solve real problems developers face every day: framework lock-in, brittle styling, inconsistent APIs, and integration nightmares. And yet, despite being supported by all modern browsers — they remain one of the most powerful yet underused technologies in web development. Web Components native, stable, and scalable foundation real problems lock-in styling inconsistent integration supported b all modern browsers most powerful yet underused technologies If you have questions about the Web Components API or anything related to Software Development – I’m always happy to help! 💚 Web Components API Software Development Feel free to leave me a comment in the Q&A section below or on my Telegram. Q&A section below Q&A section below Telegram Telegram Let’s build the IT future we could be proud of together! 🚀 I hope you’ll love the Web Components as much as I did! IT future Web Components