fastdom VS yhtml

Now, every time we read `offsetHeight`, the browser sees that it has a scheduled DOM modification to apply, so it has to apply that first, before it can return a correct value.

This is the reason that libraries like fastdom (https://github.com/wilsonpage/fastdom) exist - they help ensure that, in a given tick, all the reads happen first, followed by all the writes.

That said, I suspect even if you add a write followed by a read to your `while(1)` experiment, it still won't actually render anything, because painting is a separate phase of the rendering process, which always happens asynchronously. But that might not be true, and I'm on mobile and can't test it myself.

batching your writes & reads to the DOM (via FastDOM or a virtual DOM implementation).

For more information on how and why this works, and a more robust and complete implementation, check out the FastDom library: https://github.com/wilsonpage/fastdom - note that you might not need this particular optimization if you're using a rendering framework, which should already be doing these sorts of optimisations for you.

The main reason is that they're too low-level to use directly.

They do a lot, but stop just short of being useful without something of a framework on top. I tried hard to use them directly, but found that it was untenable without sensible template interpolation, and without helpers for event binding.

Here's my shot at the smallest possible "framework" atop Web Components that make them workable (and even enjoyable) as an application developer:

https://github.com/dchester/yhtml

It's just ~10 SLOC, admittedly dense, but which make a world of difference in terms of usability. With that in place, now you can write markup in a style not too dissimilar from React or Vue, like...

    ${this.count}

I also sometimes enjoy this approach of starting from absolutely nothing.

Instead of taking the path of starting with DOM manipulation and then going to a framework as necessary, I've kept really trying to make raw web components work, but kept finding that I wanted just a little bit more.

I managed to get the more I wanted -- sensible template interpolation with event binding -- boiled down to a tag function in 481 bytes / 12 lines of (dense) source code, which I feel like is small enough that you can copy/paste it around and not feel to bad about it. It's here if anyone cares to look: https://github.com/dchester/yhtml