Skip to main content Accessibility Feedback

The wrong way to do Web Components

There’s not really a “wrong” way to build Web Components. But there are some approaches that are, in my opinion, antithetical to the spirit of them, and maybe miss the point of what makes them so great.

Today, I wanted to talk about that in the context of a project that’s been getting a lot of hype: Web Awesome.

Let’s dig in!

Shoelace is a Web Component library. They were purchased by Font Awesome, and Web Awesome is going to be the next major release of the library. It’s basically Bootstrap, but built with Web Components.

The Kickstarter raised $724,602, and a lot of of “Web Platform Evangelists” have been really excited about a Web Component project raising so much money.

But here’s the problem: Shoelace is not a progressive enhancement library.

Here’s how you make an <input> element…

<sl-input label="What is your name?"></sl-input>

Here’s how you make a <button>

<sl-button>Button</sl-button>

Far too much of the UI renders nothing at all without JavaScript. Other stuff starts out as useless junk.

That <sl-button>? Without JS, it’s just text. You can focus on it. You can’t interact with it. Why do I need JavaScript to render a button!?!

I’ve had a lot of folks tell me it’s excited that a Web Component project has gotten this much interest.

It’s platform native instead of a library.

To me, this looks like just another JavaScript library.

That it uses the Web Components API instead of a third-party framework is just an implementation detail. The end user experience is the same.