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

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Establishing a single source of truth for all data
02:39 MIN

Establishing a single source of truth for all data

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Breaking down silos between HR, tech, and business
03:39 MIN

Breaking down silos between HR, tech, and business

What 2025 Taught Us: A Year-End Special with Hung Lee

Featured Partners

Related Videos

See all videos
Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

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

Frameworkless: How to use Web-Components in production?

Tobias Münch

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
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.