Web Components are apparently a thing, finally

I survived the first half dozen rounds of ✨Web Components™✨ hype before jumping off the wagon to preserve my front-end productivity (if not dignity) somewhere around 2015. I almost didn't read this article, but I'm glad I did, because it looks like in my absence the browsers actually made Web Components a thing. A thing that you can define and build without the help of an ill-considered UI framework and without needing a compilation pipeline to convert high-fantasy JavaScript into something browsers can actually execute.

A spritely simplification of the code to Do A Component from Jake's piece:

// 1. Define it
class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadow.innerHTML = '<span>Hello, World!</span>';
  }
}

// 2. Wire it up
customElements.define("my-component", MyComponent);

And then drop it into your HTML:

<my-component></my-component>

And your page will print: .

(If the above text reads "Hello, World!", that's the component working because this post actually executes that script. Go ahead and view source on it!)

Cool to see that this actually works. I was so sure that the customElements API was some bullshit polyfill that I opened Safari's console to verify that it was, indeed, real, before I continued reading the post.

Will I start using Web Components anytime soon? No. For now, I'm still perfectly happy with Hotwire sprinkles on my Rails apps. But I am glad to see that Web Components are no longer merely a pipe dream used to sell people snake oil.