Eduard Ruzga
1 min readDec 2, 2019

--

It seems no one has answered your question here.
Comparison is between lit-html and preact because those are closer to being apple to apple.

innerHTML completely destroys existing elements. This is very bad in some situations because it looses focus, looses event listeners, breaks animations that are in the process of playing etc.

So innerHTML is unusable if you are having any of these things involved in ‘app’.

For example you have an interactive form with a ticking timer on your page.
User is filling in his data.
You also have listener attached to submit data with validation script.

You update form with new time using innerHTML. It destroys whole form, focus is not in input he was in, and you need to reattach your submit button listener as well.

While both lit-html and preact do things differently. They update instead of swapping the html input, as a result no need to reattach event listeners, and focus stays where it was.

--

--

Eduard Ruzga
Eduard Ruzga

Written by Eduard Ruzga

We make our world significant by the courage of our questions and by the depth of our answers — Carl Sagan

No responses yet