:style with multiline attribute removes root element in all versions of IE

Vue.js version

2.0.0-rc5

Browser

Internet Explorer 10 Microsoft Edge

Reproduction Link

http://danieldiekmeier.de/vue/1.html // This one doesn’t show anything http://danieldiekmeier.de/vue/2.html // This one shows “Hello” in Red, as expected

Steps to reproduce

This is the HTML that does not work:

<div id="app">
  <div
    :style="{
      'color': 'red'
    }"
  >
    Hello
  </div>
</div>

This is the HTML that does work:

<div id="app">
  <div
    :style="{'color': 'red'}"
  >
    Hello
  </div>
</div>

This is the JavaScript:

new Vue({
  el: '#app'
})

What is Expected?

No matter if I enter the :style attribute in multiple lines or not, it should always work the same. (It also works in both cases if I use Vue v1). In Chrome and Firefox, both versions are working.

What is actually happening?

(Here you can see the #app div completely missing in the DOM tree.)

When using IE (11, in my case) or Edge, the whole root element (#app) gets completely thrown out of the DOM as soon as Vue starts rendering. This happens regardless of emulated document mode (Edge, 10, 9 all behave the same).

(I was not able to reproduce this bug in a JSFiddle, even when using exactly this code. But in the examples above, it does happen). Here is the fiddle: https://jsfiddle.net/gzd6o9ob/4/

[jakelauer]

This is happening for me using Edge, Vue v2.4.2

[posva]

Oh, didn’t know it worked on the previous version. Vue 2 is rewritten from scratch and uses Virtual dom to parse templates. Maybe Vue 1 actually handled that. Can this be fixed easily for Vue 2 @yyx990803 ?