Web Component Base (WCB)

Funny story how WebComponent.io started: I was on a vacation with the family and did not bring my laptop. While in vacation, I took lots of videos and pictures and posted them via Instagram Stories because that’s where my friends & the rest of family are.

It was also a time that I was working on some contributions to Elk, and I thought: Hey wouldn’t it be nice to post these Instagram-story-style (I’m a big fan of that UI) everywhere I can: Elk, my personal site, Pixelfed maybe?

But Elk is in Nuxt, my site is in Astro, and Pixelfed is in some PHP framework (I think)…

I have to build it framework-agnostic! How?

That’s when I got into web components.

The problem was: I had the idea in my head for a while, without a laptop to work on it…

So when I got back home, without consideration of searching for available tech, the first thing I did was study how to build it starting from scratch: extending from HTMLElement. Immediately I saw several boilerplate I don’t want to write every time I need a custom element… and I naturally wrote my own base class.

After several iterations, the APIs got really interesting, and I posted about it on my social. This is when someone commented: “TAKE A LOOK AT THIS” (or something like that) and linked me to Lit’s ReactiveElement.

And then, I realized, woops HOW CAN I FORGET LIT EXISTS!?.

Anyway, here we are, I still don’t have the Instagram-story-style component that started it all… because I felt the need to have a simple custom elements base class first…

Now I have Web Component Base for it. Cursed hobby projects :)

There’s a trade off between productivity & lightweight-ness here, and it is somewhere between Microsoft’s FASTElement & Google’s LitElement.

I would like to thank the following

1. htm - I use it for the html function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing… but we’ll see.
2. fast - When I found out that Microsoft has their own base class (super cool!), I thought: okay, I don’t feel bad about forgetting Lit exists now
3. lit - you guys rock. lit-html continues to amaze me and I worked to make wcb generic so I (and others) can continue using it