A common web component learning blunder

June 3, 2024

Dave posts about this common web component learning blunder. The blunder is… not using a framework. I’m very guilty of this myself. I was just commenting about how the lifespan of web components could be wonderfully long if we keep them dependency free, which theoretically we can because they are a native part of the platform. But…

If you take anything from this post, please understand this: web components (most likely) weren’t designed for you. Not to dissuade you from using them, but they were purposefully designed to be a low-level bare metal primitive for library authors to build on; they were designed to be used with a library, a thin layer of abstraction butter on top.

You’re supposed to use them with a framework on top. As Dave lays out, they buy a lot and cost little.

Learn to Work with Web Components

Dave Rupert's course on Web Components will get you entirely up to speed on this powerful native web platform technology. As Dave says, it's HTML with Superpowers.

One response to “A common web component learning blunder”

Danny Engelman says:

July 29, 2024 at 5:55 am

That 7 KB Lit will look a lot larger when you write proper JavaScript

  customElements.define('my-app', class extends HTMLElement {
    constructor() {
      const createElement = (t, p) => Object.assign(document.createElement(t), p);
      super()
        .attachShadow({ mode: 'open' })
        .append(
          createElement("H1", {
            innerHTML: "Welcome to my app"
          }),
          createElement("Button", {
            innerHTML: "I'm a button",
            onclick: evt => alert("Hi")
          })
        )
    }
  })

Author

Chris Coyier

CodePen

I’m a web designer and developer and my career arc is about helping you get better at those things. Sometimes people talk to me about that.

With Alex Vazquez, I’m the co-founder of CodePen, a social front-end web development environment. With Dave Rupert, I’m the co-host of a podcast called ShopTalk.