Tobias Scholz
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 Components
Rowdy Rabouw
Frameworkless: How to use Web-Components in production?
Tobias Münch
Building a component library for modern challenges
Filip Rakowski
Why LIT is Fire
Lucien Immink
Catching up on the basics you don't really need that much code
Chris Heilmann
Unlocking Seamless Collaboration: Design-First APIs for UI Components
Lucien Immink
Leveraging Storybook for Component Driven Development outside of your classic Component Library.
Emma Britnor
Accessibility with Web Components
Manuel Mauky
From learning to earning
Jobs that call for the skills explored in this talk.


Frontend VUE/React Developer
Luxoft
Municipality of Madrid, Spain
Intermediate
Azure
React
Python
Vue.js
Node.js
+5
Senior Frontend Developer
VASS
Municipality of Madrid, Spain
Remote
Performance Testing
Continuous Integration
Software Engineer - Frontend (Vue.JS)
Altium LLC
Cambridge, United Kingdom
Remote
€55K
Senior
CSS
GIT
HTML
+1
Web Developer - Node / Typescript / HTML / SCSS / Liquid / Shopify
Codext GmbH
Ilshofen-Vellberg, Germany
€40K
CSS
HTML
Node.js
JavaScript
+1





