I am working on layouting library(inspired by the concepts behind Clay). There are two modes in which these things operate - immediate mode where you recreate everything anew for every frame, or retained mode where you create everything only once and then mutate the existing state for every frame and render only the differences.

HTML DOM uses retained model as it would be unimaginable to completely throw out the entire DOM and rebuild it anew with every frame. But React, Vue and other libraries use immediate mode to communicate with HTML DOM. They might internally have retained mode, but in the end they only perform mutations based on their internal differences.

So the whole web ui is layer upon layer of immediate, retained and hybrid modes all talking to each other. Now imagine how much wasted resources all of this layering implies :)

Another interesting fact is that when you have opacity or translucency in web ui, the browser render the background elements off canvas and uses it as background for the element with the opacity in order to avoid issues with various elements seeping through in many unexpected ways.

tl;dr this topic has been thoroughly discussed in here https://www.youtube.com/watch?v=XYFBOIr6n_s