Vue: Impossible to preserve directive dom changes when the dom element is shared by multiple vnodes.

[Aaron-Pool]

Version

2.5.17

Reproduction link

https://codesandbox.io/s/8y0yqono38

Steps to reproduce

Create a wrapper component that has another custom component as its root node. Put a directive on the wrapper component that adds a class to the element. Do anything that updates the child's class. The classes assigned in the directive of the parent vnode will be wiped out, and the directive has no way of knowing it. I _think_ this is because the vnodes were merged into the same element. So, the child vnode gets patched, causing the class update and the dom change to the same element that the parent vnode is using, but, because no actual patch happened to the parent vnode, the parent directive never has a chance to readd it's class.

I think this probably _technically_ correct behavior, but it still presents (in my opinion) an issue with directive functionality. Which is that my host dom element can be mutated by a different vnode and I'm not aware of it.

What is expected?

The update trigger runs when my host element is mutated.

What is actually happening?

The class the directive adds is overwritten and my directive has no chance to readd the class.

[yyx990803]

Yeah, your understanding is correct. Just so you know in 3.0 this will not be an issue as all data on the component node is merged onto the component's root node instead of patched separately as it is now in 2.x.

I'm not sure if we will be able to address this in 2.x since it's a pretty risky change that may lead to unexpected breakage.

[Aaron-Pool]

@yyx990803 Thanks for the quick response! I guess that was what I expected. I don't suppose there's anyway to make DOM changes like this in a directive that the current vDom merge strategy _wouldn't_ overwrite?