> Markdown version of [/videos/1679-building-a-framework-independent-component-library?t=570](https://www.wearedevelopers.com/videos/1679-building-a-framework-independent-component-library?t=570). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Building a framework-independent component library

Ditch endless UI rewrites and break free from framework lock-in. Build a resilient, framework-independent component library using native browser APIs and Lit.

- **Speakers:** [Tobias Scholz](https://www.wearedevelopers.com/@tobias-scholz)
- **Event:** World Congress 2025
- **Published:** August 20, 2025
- **Duration:** 19:46
- **URL:** https://www.wearedevelopers.com/videos/1679-building-a-framework-independent-component-library

## Summary

Front-end teams frequently encounter UI inconsistencies when migrating legacy systems or combining multiple web frameworks like Vue, Angular, and Svelte within a single website. Framework-independent web components solve this by relying on native browser APIs to create resilient UI elements. By combining custom elements with the shadow DOM, developers gain true style and script encapsulation, ensuring that internal component styles never leak into the host application's "light DOM" and vice versa.

While building native components using simple `HTMLElement` extensions and `adoptedStyleSheets` is highly effective for basic isolation, defining boilerplate logic manually becomes cumbersome at scale. Transitioning to a modern development stack utilizing Vite as a build tool and Lit as a lightweight priority wrapper significantly improves developer experience. Lit dramatically shortcuts boilerplate code by automatically managing shadow DOM synchronization, handling complex HTML slot projections, and offering streamlined static style definitions without sacrificing native browser compatibility.

Strategically, framework-agnostic libraries serve as a powerful bridge for migrating away from heavy, proprietary third-party UI dependencies. Engineering teams can encapsulate existing legacy components inside web components, enabling a gradual, piece-by-piece replacement strategy without necessitating a full application rewrite. Lit also optimizes performance in these scenarios by intelligently sharing common scripts and CSS across shadow roots rather than duplicating them. To scale internal adoption, integrating Storybook creates a fully interactive documentation platform where developers can modify parameters in real time and copy auto-generated implementation code, a pattern successfully proven by massively scalable frameworks like IBM's Carbon Design System.

**Keywords:** framework-agnostic component libraries, web components encapsulation, shadow DOM style isolation, custom element HTML styling, UI consistency across mixed frameworks, vite build tool configuration, lit element framework wrapper, adopted style sheets implementation, legacy web application migration, third-party UI dependency replacement, storybook interactive documentation, vanilla javascript custom elements, enterprise design system architecture, HTML slot property injection

## Chapters

1. **The challenges of multiple frontend technology stacks** (00:00) — Using different frameworks on the same site often leads to styling inconsistencies.
1. **What are web components and custom elements** (01:43) — Custom elements extend standard browser elements through dedicated JavaScript classes defining native-like behaviors.
1. **Comparing light DOM and shadow DOM encapsulation** (02:51) — Encapsulating styling within a shadow document object model prevents cascading style sheet conflicts globally.
1. **Live coding vanilla web components without libraries** (04:19) — Setting up custom elements manually involves bootstrapping nodes, attaching shadow roots, and manually registering tags.
1. **Simplifying component development with Vite and Lit** (08:16) — Adopting modern bundlers and structural wrappers significantly streamlines custom element creation.
1. **Comparing vanilla web component code to Lit implementations** (09:30) — Extending a dedicated library automatically handles underlying template rendering and improves syntax ergonomics.
1. **Wrapping legacy external components for slow migrations** (12:49) — Encapsulating purchased third-party widgets allows incremental migrations while maintaining consistent visual styling locally.
1. **Building interactive component documentation pages with Storybook** (15:18) — Interactive documentation platforms empower engineers to test component parameters and quickly copy integration code.
1. **Real-world web components in the Carbon design system** (17:14) — Reviewing an open source enterprise repository demonstrates how complex open UI libraries scale with standardized technologies.

## Related Moments

- [Building framework-less architectures with native custom web components](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Building a framework-agnostic design system with web components](https://www.wearedevelopers.com/videos/648-accessibility-with-web-components) (from "Accessibility with Web Components")
- [Understanding standard technologies behind web component architecture](https://www.wearedevelopers.com/videos/648-accessibility-with-web-components) (from "Accessibility with Web Components")
- [Integrating web components across popular javascript frameworks](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [The rise of modern component-based frameworks and modular architecture](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [Exploring alternative build tools and experimental web components](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Top 10 Svelte UI Libraries in 2025](https://www.wearedevelopers.com/magazine/250-top-10-svelte-ui-libraries-in-2025)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**