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

[danieldiekmeier]

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/

[danieldiekmeier]

Oh, I tried using the unminified version of Vue and it showed a helpful error:


 is the Line Feed Character (according to this source).

So the problem seems to be that IE/Edge transforms the Line Feeds into HTML entities, and the other browsers don't. Hope this helps.

Reproduction with unminified version: http://danieldiekmeier.de/vue/3.html

[posva]

Well, this looks like an IE issue to me 😄
The html spec says you can add whitespace and newlines to attrs. But IE seems to be ignoring this rule.
Having the console error looks enough to me. You can then use a computed property or put it all in one single line.

[danieldiekmeier]

@posva I thought this was a recent Vue bug because v1.0.26 handles this just fine:

So it should be (and certainly was) possible, and this regression seems to be new. Did Vue 2 make fundamental changes to the way attributes are parsed?

Reproduction with uniminfied Vue v1.0.26: http://danieldiekmeier.de/vue/4.html

[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 ?

[jakelauer]

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