I didn’t have any luck with #2, but I ended up settling on #3, and with some experimentation got it to work.
It’s really very simple, the onBeforeElUpdated callback gives you the option to hook into the step when Liveview asks morphdom to update a specific DOM node with some change.
At the onBeforeElUpdated point, morphdom has two versions of the DOM node it is working with: the “to” version (what the node should become) and the “from” version (what the node is at the moment).
If, for example, you want to preserve all the styles in the classList that are there before Liveview wants to push its update, simply set the to.classList to the state of from.classList, like this:
...
dom: {
onBeforeElUpdated(from, to){
to.classList = from.classList
}
},
...
Important note: It seems like you need to add a unique ID to the node whose classList (or other property) you want to preserve with the above.
The above, is, of course, just a simplification, as you probably want to have some logic to have this happen only on nodes that meet certain criteria. Examples might be only those nodes whose styling is impacted by your local JS helper library, etc.
By the way, playing with this helped me understand how Liveview works much better, and gave me an appreciation for the awesome library that morphdom is ![]()
You can, for example, see morphdom walking the DOM live, by doing something like this (note that the console.logs slow the process down quite a bit):
...
dom: {
onBeforeElUpdated(from, to){
console.log("****************")
console.log("from state:")
console.log(from)
console.log("to state:")
console.log(to)
}
},
...
Hope this helps!
Edit: On further thought, it might be that my problem with #2 was that I didn’t use an ID on the node. It might simply work if you give the node a unique ID…






















