A common web component learning blunder

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

One response to “A common web component learning blunder”

  1. 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")
              })
            )
        }
      })
    

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $313,806 contributed to date.