My feeling is that the browser already does this in that it considers all DOM apis within a single 16ms (requestAnimationFrame?) as a single transaction.

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"
    - ...

The reason being that without knowing the width of "otherElement", there's no way for the js runtime to execute the "e.style.height" line and execution needs to be paused while layout occurs.

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" });

I'm not a browser expert though so if I"m misunderstanding something, would love to know.