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.

Featured Partners

Related 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

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Engineer

Lightning AI
Charing Cross, United Kingdom

Remote
€53K
React
JavaScript
TypeScript
+1