---
title: "Web Component Base (WCB)"
permalink: /:title/
description: "A simple reactivity system for Web Components"
category: projects
---

Funny story how [WebComponent.io](https://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](https://main.elk.zone), 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](https://nuxt.com/), my site is in [Astro](https://astro.build), and [Pixelfed](https://pixelfed.org/) 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](https://webcomponent.io) for it. Cursed hobby projects :)

There's a trade off between productivity & lightweight-ness here, and it is somewhere between [Microsoft's FASTElement](https://github.com/microsoft/fast) & [Google's LitElement](https://github.com/lit/lit/).

## I would like to thank the following

1. [htm](https://github.com/developit/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.
1. [fast](https://github.com/microsoft/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
1. [lit](https://github.com/lit/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
