Initial Discovery - Lit
Tue Feb 15 2022
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:
- 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