Allow slot content to be passed verbatim.
What problem does this feature solve?
Vue 3 removes line breaks and spaces from slot content when passing it to the component. Here is a simple example. This breaks Vue components that rely on slot content to be passed verbatim e.g. for rendering source code.
A component named Code for rendering source code in Vue 2 looks like this:
<template>
<pre><code><slot/></code></pre>
</template>
The source code to be displayed can be passed as slot content:
<Code>first line
second line
</Code>
In Vue 3, this doesn't work anymore since line breaks and additional spaces are removed from the slot content.
I propose to add the possibility to mark slots as "verbatim", allowing slot content to be passed without changes to the component.
What does the proposed API look like?
Slots can habe an optional attribute "verbatim" or "pre".
<template>
<pre><code><slot verbatim/></code></pre>
</template>
I'd presume this is not about slots, but more generally, handling whitespace:
@LinusBorg Thanks, this is the same thing.