Personally I'd miss the JSX syntax, but this more than makes up for it by removing the entire whacky state vs. props thing. Although- how do you represent custom props here - arguments to the constructor? That'd be really elegant.

Do those styles and query selectors leak out of the component? I'm assuming they don't since that's the entire point of the idea of a component, but just want to be sure.

https://github.com/rishavs/Verdin/blob/master/src/views/comp...

I just wish that one of these days I will get off my ass and actually finish something that I start :D

What I don't like is this also shows (via the render method) how you can foot gun yourself if you aren't careful. Just slabbing in everything via `this.innerHTML` will lead to gross performance problems, among other things. There's also no real diffing (only matters on more complex concerns, in a way) so you're replacing everything just to update the count.

I know we're all suppose to know better (I doubt you did this except for the express purpose of showing just how simple the Web Component API can be), but I've seen example code end up in production more times than I can count, from all over the web, so be forewarned stewards!

    <form>
      <button onclick="form.counter.value -= 1;return false">-</button>
      <input name="counter" value="0">
      <button onclick="form.counter.value = 1 + +form.counter.value;return false">+</button>
    </form>

    class MyCounter extends HTMLElement {
      connectedCallback() {
        this.attachShadow({mode: 'open'}).innerHTML = `<style>...</style><form>...</form>`
      }
    }
    customElements.define('my-counter', MyCounter)