Working with the DOM directly

Lively.next uses a virtual DOM between Morphic and the real DOM. This can lead to situations where a change of a property of a morph is not reflected in the real DOM (and therefore in the rendering of the browser) in real time and vice-verca.

Most of the time this is not a huge problem, but especially for interactions that are based on a lot of fast changes (i.e. when changing the scroll of elements with scroll events) this becomes troublesome.

In these cases it can be useful to bypass the virtual DOM and manipulate the DOM node of Morph directly. When doing this it is important to reflect these changes back into the Morph, since otherwise we can end up in an inconsistent change where the old value of the Morph will be reapplied with the next rendering cycle of Morphic.

On the DOM nodes we can set basically any property that a DOM node has, but be aware, that these do not map 1:1 onto the Morphic properties.

const domNode = someMorph.env.renderer.getNodeForMorph(morphForWhichWeWantTheNode);
domNode.scrollLeft = newValue;
//reflect the made changes into the morph
morphForWhichWeWantTheNode.setProperty('scroll', pt(newValue, layerContainerNode.scrollTop));