The current state of front end JavaScript development is not good. Angular, React, Svelte, and even now Vue have become too over-engineered.
I'm trying to do something relatively simple. Assemble a collection web elements that will dynamically update as users interact with them. Why do I need a massive toolchain to pull that off? Is there a simpler way?
WebComponents have been around for quite a while but I have never directly created one. I hadn't even read up on shadow DOM till yesterday! Could the use of WebComponents provide a path to a more sustainable web development workflow?
After some research I decided it would be a pain to manually compose html and css strings so I decided to use a small library called Lit to help me build my first components. Here they are in all their glory:
Here are the core competencies that I wanted to explore:
- Multiple components - one nested inside another
- Reactivity within a component
- Passing events up to parent component
- Passing properties down to child component
I only ran into two issues during the setup:
1) I decided to use snowpack to run my dev environment. That worked smoothly, but blew up when I tested a "snowpack build". I got this: error: Expected ";" but found "render" This took a long time to resolve, but I eventually changed noImplicitOverride to false in tsconfig.json. It turns out snowpack was unable to handle the JavaScript generated from the "override" keyword.
2) I had a hard time setting the "selected" attribute within an option on my select. Thankfully Lit has some great docs and I found how to do boolean attributes to resolve that.
Otherwise this looks like there could be a ton of potential. I liked the feeling of working closer to the browser. I am going to be adding on to this in the coming weeks.
Here is my repo : https://github.com/aaronblondeau/lit-starter
Top comments (0)