A Look at Web Components
Are Web Components a thing yet? Yes.
Web development can feel overwhelming. Different languages, constant code rewriting. But wait, there's a solution: Web Components.
What are Web Components?
Think of web components as instructions for your components. They tell web browsers how to create and display reusable parts. They are the building blocks of modern websites—standardized, reusable, and reliable.
They function like standard HTML elements in browsers. These components rely on three key technologies:
Custom elements: Define new or extend existing HTML tags
Shadow DOM: Encapsulate custom elements' structure, style, behavior
HTML templates: Aid reusable markup template creation
Why Does It Matter?
✅ Better Design Choices: You'll understand the importance of consistency.
✅ Improved Communication: You'll converse better with developers about updates.
✅ Time and Cost Savings: Using pre-made components is quicker and cheaper.
Benefits
More consistent, user-friendly websites
Faster updates and changes
Better brand control online
Improved experiences across devices and platforms
Easier to scale
Framework-agnostic
Standardization, UI consistency across all platforms
Efficiency ->ave time + money
Highly customisable
Browser support
Future-proof
Browser support
Cons:
Older browsers support issues
Learning curve
Complex components can be less performant
Libraries + Frameworks
If you want to create custom HTML elements (web components) that work across frameworks, browsers, and environments, Lit is one of the best choices.
If you want a framework-like development experience but still need cross-framework, native web components, Stencil is a strong option.
If you want a simple, no-boilerplate way to create web components, Hybrids is a great option.
Design Systems using Web Components
Adobe: Spectrum Design System
IBM: Carbon Design System
Microsoft: FAST Design System
Videos
📹 Web Components Can't Save Us. But You Can! with SCOTT JEHL — SmashingConf New York 2024 (video)
📹 Creating Web Components - With Special Guest Dave Rupert!
📹 Shining Light on the Shadow DOM - Cassondra Roberts | CSS Day 2023
Useful resources:
An introduction to Web Components
Web Components are Easier Than You Think
React integration for Web Components and Reactive Controllers.
Shoelace (now Web Awesome)
Web Awesome - the open-source library of web components ✅
Web Awesome is the new name for Shoelace, the most popular free and open-source library of web components. (Shoelace and its creator, Cory LaViska, joined Font Awesome in 2022.)
Web Awesome components are built using web standards; no JavaScript frameworks are required. But Web Awesome works great with them all.
Early demos:
Theme builder
Pattern library
Layout engine
Sooooo, are Web Components a thing yet? Yes.
Web components are the future of web development. They will make the internet more consistent and user-friendly.
Top Resources This Week 💎
🔗 RYBitten from David Aerne (waitlist)
RYBitten is a tool designed to help creatives work with colors more intuitively and systematically. Whether extracting hues from an image, building harmonious ramps, or creating palettes for generative art or design tools like Figma, RYBitten makes it easier to craft beautiful, cohesive color schemes.
➡️ Preview
🔗 Motion Guidelines from Luke Stanley for Canadian digital bank KOHO.
I love this kind of brand presentations.
🔗 Web Components Demystified Course
A comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.
(I’m not affiliated)
Person to follow ❤️
This week, I want to introduce you:
Nate Baldwin
Nate is currently Sr. Staff Designer at Adobe. He is passionate about unifying systematic processes and guidelines for enterprise-level design and engineering efficiency. I am also feverishly curious about color perception and science, specifically focused on creating flexible, adaptive, and accessible color systems.
I loved his talk at this year’s Into Design Systems Conference. Take time and watch 🔗 Scalable scales that scale 🫶
He built a tool for proportional user interface systems called 🔗 Proportio
