Non-breaking space acts different than other characters - outputs " " in template when passed via props

Version

2.5.17

Reproduction link

https://codepen.io/avertes/pen/LYYpNRe https://jsfiddle.net/50wL7mdz/756973/

Steps to reproduce

1. Create a new component that accepts a string prop.
2. Display the prop within the component’s template.
3. Use the component in a Vue application and pass a string containing a non-breaking space character for the prop.

What is expected?

The output should contain a non breaking space

What is actually happening?

The output shows  

---

In the example provided I’ve made 3 cases

• First case is that   get turned into  
• Second case is that in a long list of UTF-8 characters only NON-BREAKING SPACE is escaped.
• And third when getting the same list of characters, but retrieving it from a regular HTMLElement with document.querySelector('#test').title the character aren’t escape.

Note: When copying the non-breaking space character it might turn into a regular space in the clipboard. Therefor use https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods to make sure how to insert the character.

[grreeenn]

as a workaround, try to put the JS escape code for   - \xa0

found here, worked for me in nonbreakinspacification function

    public static noBreakingSpaces(str: string): string {
        return str.replace(' ', '\xa0');
    }

strings returned by this function are being rendered with &nbsps instead of spaces.

[Eibx]

Yeah - it does seem to be related the way Vue parses html attributes in general.

I’ve made a similar example based of @approached example https://jsfiddle.net/onbzk0m6/3/