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
10:36 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
02:09 MIN

Understanding web components and their core technologies

Accessibility with Web Components

Understanding the role and value of web components
27:59 MIN

Understanding the role and value of web components

Keith Cirkle of GitHub on React Fatigue

Simplifying development with Lit and Stencil
37:17 MIN

Simplifying development with Lit and Stencil

Extending HTML with Web Components

Creating modern code islands with web components
11:13 MIN

Creating modern code islands with web components

Defeat that legacy monster! Guerilla refactoring with web standards

Introducing the three core parts of web components
03:19 MIN

Introducing the three core parts of web components

Extending HTML with Web Components

Structuring a production project with web components
13:55 MIN

Structuring a production project with web components

Frameworkless: How to use Web-Components in production?

Using Web Components and Svelte as an alternative
04:03 MIN

Using Web Components and Svelte as an alternative

On tour with heroes == Moving from Angular to WebComponents

Featured Partners

Related Videos

See all videos
Extending HTML with Web Components41: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 challenges29:44

Building a component library for modern challenges

Filip Rakowski

Why LIT is Fire31:56

Why LIT is Fire

Lucien Immink

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

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

Chris Heilmann

Unlocking Seamless Collaboration: Design-First APIs for UI Components28: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

Accessibility with Web Components25:33

Accessibility with Web Components

Manuel Mauky

Related Articles

View all articles
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
EM
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

From learning to earning

Jobs that call for the skills explored in this talk.