Each tool is good for particular tasks it was designed for.

That's why my Sciter [1] supports both - as retained mode (DOM/CSS) as immediate mode (element.paintXXX()).

Consider the task of marking some div as resizable - with eight square handles [2]. With immediate mode drawing that task is trivial:

   const div = ...;
   
   // draw sizing handles:
   div.paintForeground = function(gfx) {
     gfx.fillColor = "#0f0";
     for(let r of this.sizingHandlePlaces()) 
       gfx.fillRect(r); 
   }

otherwise, if we have only retained mode as in browsers, we will need to modify the DOM heavily and create temporary elements for handles.

[1] https://sciter.com [2] https://stackoverflow.com/questions/20984181/how-do-i-make-a...