Tobias Scholz

Building a framework-independent component library

Build your UI components once. Use them natively in React, Vue, and Angular with a framework-independent library.

Building a framework-independent component library
#1about 2 minutes

Solving UI inconsistency across multiple frontend frameworks

Component libraries built with Web Components can solve UI inconsistency when projects use different technology stacks like Vue, Angular, or Svelte.

#2about 3 minutes

Understanding Web Components, Custom Elements, and Shadow DOM

Web Components use Custom Elements to define new HTML tags and the Shadow DOM to encapsulate styles and behavior, preventing conflicts with the main document.

#3about 4 minutes

Building a basic Web Component with vanilla JavaScript

A step-by-step demonstration shows how to create a custom button element from scratch using vanilla JavaScript, including attaching a shadow root and handling attributes.

#4about 5 minutes

Setting up a modern component library with Vite and Lit

Using Lit simplifies Web Component development by reducing boilerplate code for managing the Shadow DOM and styles, while Vite serves as an efficient build tool.

#5about 2 minutes

Encapsulating third-party components for gradual migration

Web Components can wrap existing third-party libraries like DevExpress, allowing for a piece-by-piece migration to a custom component library without a full rewrite.

#6about 2 minutes

Documenting components effectively with Storybook

Storybook provides an interactive interface for developers to browse components, test different properties in real-time, and view usage examples and code snippets.

#7about 3 minutes

Exploring the IBM Carbon Design System as an example

The IBM Carbon Design System is a production-grade example of a framework-independent component library built using Web Components, Lit, and Storybook.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Building with Web Components and the Lit library
06:45 MIN

Building with Web Components and the Lit library

Making of paint.js.org—a Web Component-based Productivity PWA

Understanding web components and their core technologies
07:10 MIN

Understanding web components and their core technologies

Accessibility with Web Components

Understanding the role and value of web components
03:17 MIN

Understanding the role and value of web components

Keith Cirkle of GitHub on React Fatigue

Building a custom component library for consistency
00:47 MIN

Building a custom component library for consistency

Bridging the Gap

Simplifying development with Lit and Stencil
00:45 MIN

Simplifying development with Lit and Stencil

Extending HTML with Web Components

Creating modern code islands with web components
03:33 MIN

Creating modern code islands with web components

Defeat that legacy monster! Guerilla refactoring with web standards

Building consistent UIs with an enterprise component framework
01:28 MIN

Building consistent UIs with an enterprise component framework

Navigating the Corporate Jungle: Life as a Developer in a large Company

Using Storybook to build and maintain shared libraries
01:46 MIN

Using Storybook to build and maintain shared libraries

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

Featured Partners

Related Videos

See all videos
Extending HTML with Web Components
41:54

Extending HTML with Web Components

Rowdy Rabouw

Frameworkless: How to use Web-Components in production?
46:39

Frameworkless: How to use Web-Components in production?

Tobias Münch

Building a component library for modern challenges
29:44

Building a component library for modern challenges

Filip Rakowski

Why LIT is Fire
31:56

Why LIT is Fire

Lucien Immink

Catching up on the basics you don't really need that much code
14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Unlocking Seamless Collaboration: Design-First APIs for UI Components
28:35

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Leveraging Storybook for Component Driven Development outside of your classic Component Library.
25:32

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

Emma Britnor

On tour with heroes == Moving from Angular to WebComponents
43:08

On tour with heroes == Moving from Angular to WebComponents

Benjamin Glusa

Related Articles

View all articles
Eli McGarvie
Top 10 Svelte UI Libraries in 2025
As Svelte gains traction among developers for its impressive performance and simplicity, the need for robust UI libraries becomes increasingly apparent. UI libraries can provide developers with the necessary building blocks to easily create beautiful...
Top 10 Svelte UI Libraries in 2025
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025
Which frontend frameworks should developers focus on in 2025? We’re listing them for you and showing advantages and drawbacks. You’ll notice we included some libraries as well, because you can’t miss those in 2025.What is the best front end framework...
The Best 7 Frontend Frameworks for Developers in 2025
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?

From learning to earning

Jobs that call for the skills explored in this talk.