I spent a little time over the holidays playing around with Stencil, a JS compiler for web components. I wanted to look at it because we've been comparing component libraries at work, and we were finding a surprising number of them that were going all-in on web components, usually generated by Stencil. Some quick notes about it in general, and comparing it against React, our current JavaScript library of choice:
.html
file that wasn't just <div id="app"></div>
.Overall I was impressed by Stencil. The documentation could be better, but they make it pretty easy to fire up a project and figure it out, and TypeScript + JSX is by far my favorite combination for JavaScript templating. Some of the decisions are close to React but not quite the same, like having props and state but not state update batching, or at least not that I could find. Digging through the shadow DOM in the Chrome inspector is painful compared to using React dev tools, especially if you're using child elements, which exist in some sort of alternate reality that allows you to interact with them like normal DOM elements. I built the carousel as a web component that accepts any children because that's how I would do it in React, but dealing with children beyond using the web component <slot>
tag required some Stack Overflow searches and some solutions that I'm still not sure I grok.
If there was ever a chance we were moving away from doing everything in React I'd jump to web components in a second, but when we are building everything in React, adding in another compiler feels like it's overcomplicating our development tooling. But maybe I'll regret saying that when we switch to Vue and have to build another carousel.
I put the demo up on GitHub, it's probably broken in IE. I hate carousels.