The problem with Web Components has and always will be that they were designed for the browser and not for the developer. As many features as they get, they’re still ergonomically odd and difficult to maintain.

People choose React, Angular, Vue, etc because they are easier for the developer and they make sense in order to accomplish professional and company goals. They are making a tradeoff for on perf (for example) in order to actually work faster. On the company’s dollar, web components are more expensive.

In my experience, Web Components really had a few big pieces that made them completely unapproachable:

• Testability

  If you wanted to test your web components, you needed to have a full browser environment to run the tests. While this is no longer the case, there was a huge burden initially to be able to actually make an application. It took until 2019 for Happy-DOM to come on the scene and not until 2020 for JSDOM to have support. That’s at least 4 years too late to even think about competing with other frameworks.

• Lack of unified frameworks

  How do you build Web Components? Well the short answer is you just write them according to spec. The long answer is that you probably use a framework that’s meant for building components. There are a few, so choose wisely. But that’s just the individual component level. Most developers are not just building piecemeal things and sharing them around – they’re paid to build applications.

  Say you want to build an application. Let’s ignore the Single page application (SPA) vs Multi-page application (MPA) argument for a moment. Even just building an MPA, you were on your own to write build tooling, integrations, and everything in-between.

  There are some out there, but I honestly can’t figure out where and/or how. I think you could maybe just use WebPack/Parcel/Vite? Maybe web components work in any framework, but apparently it can be a lot of work.

• Cross-component state management

  Honestly, I don’t know – you’re probably on your own here. This just goes straight back to the previous point about lack of unified frameworks.

• Three languages in one

  I thought CSS-in-JS was such a bad thing? That’s what all the purists told me. Well now we’ve got CSS-in-JS and HTML-in-JS and now my editor needs to support three syntax highlighters in every file and I need to hope my string templates all compile correctly.

  lit-element-example.js

  import { html, css, LitElement } from 'lit';
  import { customElement, property } from 'lit/decorators.js';
   
  @customElement('simple-greeting')
  export class SimpleGreeting extends LitElement {
    static styles = css`
      p {
        color: blue;
      }
    `;
   
    @property()
    name = 'Somebody';
   
    render() {
      return html`<p>Hello, ${this.name}!</p>`;
    }
  }

• Purists…

  Speaking of those same purists that yell about CSS-in-JS being bad, they are the biggest thing that has put me off of Web Components.

  The people who I refer to as “purists” that keep shouting about how we’re all wrong for using something else. I get it, Web Components probably are the better choice for the browser, performance, and end user when it is all said and done. But you’re the ones that created this stuff in a void – have you ever had to build a web application and maintain it for at least 5 years? Probably not since before 2010. Things were different then.

  Just go build stuff and be proud of it. Stop shouting at me that I’m terrible for trying to get my job done.

Let’s imagine that I want to get start on Web Components today.

1. Go to WebComponents.org. The homepage is basically just a random list of featured components that I could import. Okay neat, but I want to write an application, so let me continue on.

2. There’s no “Documentation” or “Docs” page. Where do I go?

3. Oh, I see an “Introduction” link. This must be the start of the docs

4. Uh-oh, this is just a link to specifications for Custom Elements, Shadow DOM, ES Modules, and HTML template elements.

   I’ll be back in a couple weeks after I read all of these.

5. Oh wait, there still isn’t a recommended way to actually build and application, just individual components.

   Guess I’ll just go build one myself.

   Just kidding, I’m just not even going to try.