Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what once was a fairly simple tech stack. In this article, I’ll discuss why Web Components are a great tool to deliver high-quality user experiences without complicated frameworks or build steps and that don’t run the risk of becoming obsolete. In subsequent articles of this five-part series, we will dive deeper into each of the specifications.This series assumes a basic understanding of HTML, CSS, and JavaScript. If you feel weak in one of those areas, don’t worry, building a custom element actually simplifies many complexities in front-end development.
Few things in the frontend world are as hot as Design Systems, the idea of building a design spec or library of reusable components that can be shared across a team or company. Design Systems enforce style and branding guidelines, reduce design fatigue for engineers, and consolidate component engineering to one single set of components and a team that builds them. Basically, they help teams manage design at scale.
As someone who makes stuff on the web, there are two things that I’ve been seeing quite a bit lately: Web Component discussion and CSS debates. I think that Web Components, or more specifically the Shadow DOM, is poised to solve some long-standing CSS problems. I’m a big fan of Web Components. In fact, I’m just wrapping up a book with Manning Publications now, called Web Components in Action.
Why I use web componentsThis is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.Let's start by defining what we are talking about.
Reusable Web Components and Design Systems are hardBuilding, Maintaining and Sharing reusable Web Components or Design Systems are expensive tasks. The build setup is a PhD project, the tooling is straigth out of FisherPrice® and packaging everything together requires knowledge that goes way beyond useful front-end development skills.We believe there is a better way...WebComponents Studio is on a mission to streamline and empower the creation of Web Components and Design Systems. Reusable components are about productivity and agility. Let's forget about the unnecessary complexity and slowdown of the underlying plumbing and let's focus on coding beautiful components with built-in quality, accessibility, user-experience and developer-experience.Join the discuss on Slack
Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier. Every Lit feature is carefully designed with web platform evolution in mind.
skatejs/ssr: Server-side render your web components.
An Introduction to Web Components | CSS-Tricks
Build Your Next Design System with Web Components | The Ionic Blog
Any Holy Grail for Web Components? – Andrea Giammarchi – Medium
Adopt a Design System inside your Web Components with Constructable Stylesheets
Web Components: from zero to hero, part two - DEV Community 👩💻👨💻
Why I use web components
WebComponents.dev
Web Components and the Accessibility Object model (AOM) - 24 Accessibility
Lit
FAST
Everything You Always Wanted To Know About Web Components (But Were Afraid To Ask) | by Danny Moerkerke | Jul, 2022 | ITNEXT
Components | The Component Gallery