This post comes at a time when I’m on the hunt for a new opportunity. While I do, I’m practicing my skills, exploring new ideas, and having some fun. If you have an opportunity for me, you can find my CV here.
Recently, a friend of mine Dan Q shared an interesting post about using a Web Component instead of React to simplify a particular problem.
He shared this post:
In Dan’s words:
What I found myself thinking was… man, this is chunky. React is… not the right tool for this job.
I tend to find myself agreeing with this, but not necessarily having a better solution. Dan suggested that a Web Component with vanilla JavaScript was the way to go here. Now, I’ve heard Dan share his love of Web Components multiple times in the past while we were colleagues. I haven’t had the pleasure of playing around with them before. Why not start today?
I built an ugly version in React just to show I could. It was much of what I’m used to in React, component, JSX, hooks, and so on. But getting an environment together with a build step, just for something like this did feel overkill.
So I went ahead and built my very first Web Component:
So how does this work? Essentially you define a class with the functionality of your component using the Web Component API. You then register the component and can use it in your HTML just like any other standard HTML element:
<body>
<traffic-robot></traffic-robot>
</body>
Aside: fun fact about terminology here. In South Africa, where I live, a traffic light is called a “robot”, hence the odd naming of my component!
I also decided to utilise the ShadowDOM to register styles and markup that are associated with the component in a way that is totally isolated from the rest of the document. That way my component would behave and look as expected no matter where it is used. No worry that styles from somewhere else are going to alter things!
Either way, this has been really fun and a good bit of practice to keep my brain sharp. Feel free to take a look at the code in the repository. I warn you, it’s a bit messy with it being a quick and dirty test project!
Leave a Reply