White space stripped between <a> and <span> where it shouldn't (in comparison to HTML)

[bernhardreiter]

Version

2.5.17

Reproduction link

https://codesandbox.io/s/6j7kz64znr

Steps to reproduce

When using two tags like and in a template of a single file component, with some white space in between.

Examples (as in the link)

  <div>
    <br />
    <a href="https://vuejs.org/">Vue.js</a>

    <span>is nice</span>.
  </div>

results in `Vue.jsis nice.'

What is expected?

Expected is the regular handling of white space in browsers that remove all, but one white space.

What is actually happening?

The last space is removed.

---

https://codepen.io/anon/pen/RqEoOr shows the regular handling of this piece of html in a browser (without other css options set).

The problem was noticed when trying to translate text with vue-gettext, where is poses an extra challenge, see Polyconseil/vue-gettext#80

[Justineo]

Duplicate of #9021

[bernhardreiter]

@Justineo thanks for the pointer to the issue! I did search the tracker, but missed it.

However I disagree with that this is resolved. I'm continuing here, because the reproduction link of #9021 does not work anymore and here are different details that explain why this is a problem to vue users.

Part of the problem is that render behaviour of browsers would usually leave on space in,
if there is

<span> a </span> <span> b </span>

and Vue components cannot be easily written to behave the same, because
they don't know if there is a space before them and if they shall preserve it.
At least it should be documented in the vue documentation (where I did search but did not find something about white space handling or inline layout.)