About the same way innerHTML is which is completely unhelpful: during reconciliation you need to copy, update, and reset the subtree which contains all the update points, which is almost certainly a lot more than you need.

You also likely need to reconcile document state (e.g. focus) by hand.

   Element.update(function(updateCtx) {
      updateCtx.setInnerText(this, "new text");
      updateCtx.setAttribute(this, "title", "new title");
      ...      
   });

But I've discarded that in lieu of Element.patch(vDOM):

   Element.patch(<div title="new title">new text</div>);

The trouble for browsers, is if certain DOM apis have a dependency on the layout of another element. My naive and unvalidated understanding:

    // Good: These DOM calls in a single frame will trigger layout-paint-composite (1 loop)
    - e.style.backgroundColor = "red";
    - e.style.width = "20px";
    - e.style.transform = "translateX(10px);

    // Bad: These DOM calls in a single frame will trigger layout-?-layout-paint-composite (2 loops)
    - ...
    - e.style.height = otherElement.offsetWidth + 200 + "px"
    - ...

If you're looking for a transactional syntax (similar to what you've proposed) that also addresses this though, fastdom looks like a good option:

    fastdom.mutate(() => { element.style.width = "20px" });

On the contrary, there is evidence that quite a few people are considering that.

https://developer.apple.com/documentation/uikit/uiview/16226...