Newline & indentation causing issues in interpreted spaces

[duckness]

Version

2.6.10

Reproduction link

https://jsbin.com/feloyenami/2/edit?html,js,output

Steps to reproduce

Have any code written with the following format (including indentation and newlines)

<div>
  <span>span</span>
  <a 
    href="https://example.com"
    rel="s"
  >
    {{ "MESSAGE" }}
  </a>
  <span>span</span>
</div>

What is expected?

Consistent rendering of the middle element, and without spaces.

What is actually happening?

On node, the dev mode and built files will be rendered as:

Including Vue as a script tag (like in the repro), you will get:

However, what you probably really want is:

---

Personally, I feel that whitespace should be stripped out if the curly braces are the only thing within the html tag, if those are required then they can be added within the curly braces like {{ " example " }}.

You will probably encounter this if you use plugin:vue/recommended in your eslint config as that enforces the multi-line attributes in html tags.

Workaround:

<span>span</span>
<a 
  href="https://example.com"
  rel="s"
>
  <template>{{ "MESSAGE" }}</template>
</a>
<span>span</span>

[duckness]

You may also encounter something similar in the following case:

<span
  v-if="true"
  rel="a"
>
  <span style="color: red;">asd</span>
  {{ "MESSAGE" }}
  <span style="color: red;">asd</span>
</span>

Spaces will be added between MESSAGE which might not be what you want (will also be added on both sides if only one of the inner spans are there), workaround is the same.This result may be unexpected considering that indentation & newline is being interpreted as actual characters.

[duckness]

just realised this is discussed in #10443 #9208