Vue slots with variable HTML passed in

Question

I have a string that contains some HTML markup.

I would like to pass this into a component's slot.

This component is used elsewhere with regular html markup between the opening and closing tags, and works as expected.

The issues are that mustache syntax outputs escaped HTML, {{myFormattedText}} becomes literally Some line of <span>text with formatting</span> that is passed in from somewhere else which is not what we want.

Passing it in the v-html="myFormattedText" attribute on the component replaces all content inside the component tags with the variable string.

Is there a way to do this? I'd like to reuse this component, for visual consistency reasons, but the content that we receive for it is disparate and varies widely based on the view or source.

Test string:

myFormattedText = "Some line of <span>text with formatting</span> that is passed in from somewhere else";

Component:

<template>
    <div class="doing-a-thing">
        <h2>Some text</h2>
        <div class="thing">Random stuff</div>
        <slot></slot>
    </div>
</template>

Attempts:

<mycomponent>{{myFormattedText}}</mycomponent>
<mycomponent v-html="myFormattedText"></mycomponent>

Answer 1

Just put the v-html render on an element inside the component tags and it'll get rendered correctly and passed in.

<mycomponent><div v-html="myFormattedText"></div></mycomponent>

Again, moments after posting, it hits me like a bolt of lightning...