Regression: bindings don’t work with elements moved in the DOM

[chasenlehara]

As of can-stache-bindings 4.2.4 (with this change), bindings don’t work when an element is moved in the DOM like this:

export default Component.extend({
  tag: "my-app",
  view: "{{name}} <input on:input:value:bind='name' type='text' />",
  ViewModel: {
    name: "string",
    connectedCallback: function(element) {
      const wrapper = document.createElement("div");
      element.appendChild(wrapper);
      wrapper.appendChild(element.querySelector("input"));
    }
  }
});

Demo: https://codesandbox.io/s/m4ny5z8ovx

I’ve used on:input:value:bind just as an example, but this bug is not specific to that kind of binding.

[justinbmeyer]

This sort of manipulation of the DOM isn't really supported and is likely to cause trouble. I'm not sure this is technically a regression.

The fix is to have another level of "tearItAllDown" ... one for the nodelist to call, where it doesn't matter if the DOM is in the page or not. Another one for the DOM Mutation callback where it checks if the node is still in the page.