No way to listen for changes to this.element on modifier #798

(This was originally an issue on ember-modifier here but it was concluded that its the underlying infrastructure that needs changing, not ember-modifier so I created the issue here instead.)

I built a modifier heavily based on @miguelcobain:s css-transitions modifier.

It lets you animate an element out by cloning it and keeping track of an elements nextElementSibling and insert the clone before it.

In this example I have an ember-dragula list implemented and every item in the list uses my custom-modifier.

I was able to work around it by adding a MutationObserver tracking removed nodes in the list and sending that array of removed nodes as an argument which triggers didUpdateArguments and in that I update nextElementSiblings. This fixes this problem, see video, showing the bug.

In the twiddle I add a green outline for 3 seconds when an element is removed. Notice how when the mutation observer the outline is on the wrong element for the second deleted item:

MutationObserver off

MutationObserver on

Maybe we could add something like a didUpdateElement event or have this.element changes trigger didUpdateArguments?

Or a better solution might be if we could hook in right before this.element is removed from the dom. That way we would not need to save the nextElementSibling on didInstall.

But if we can't add a hook to right before the element is removed from the dom I guess hooking in every time this.element is changed would also work.