Vue3 - How do you provide HTML default slot content without binding it to extra markup?

[pyrello]

This is related to this conversation: #12691. I created a separate discussion for this because I think it is a question that is more specific to Vue3 and the quirks of this specific circumstance.

Consider the following:

// HelloWorld.vue
<script setup>
//...
</script>

<template>
  <div class="hello">
    <slot></slot>
  </div>
</template>

// HelloWorld.stories.js
import HelloWorld from './HelloWorld.vue'

export default {
  title: 'Hello World',
  component: HelloWorld,
  argTypes: {
    default: {
      control: { 'text' },
    },
  },
}

const Template = (args) => ({
  components: { HelloWorld },
  setup() {
    return { args }
  },
  template: '<hello-world>{{ args.default }}</hello-world>',
})

export const HelloString = Template.bind({});
HelloString.args = {
  default: 'Hello world',
}

export const HelloHtml = Template.bind({});
HelloHtml = {
  default: '<strong>Hello world</strong>',
}

This will result in two stories being created. The first one will work just fine, but the second one will just display the raw HTML as text. This is related to Vue's policy on escaping strings passed through {{ }}. The solution to this would seem to be changing the template to the following:

  template: '<hello-world><template #default v-html="args.default"></template></hello-world>',

However, Vue doesn't recognize the v-html property on <template> elements. So, your next best option is to do something like this:

  template: '<hello-world><div v-html="args.default"></div></hello-world>',

This will work and display the unescaped HTML as expected. But this means that your markup that gets displayed through any code examples will include the extra <div> element (assuming we eventually get a solution to #13917). Our intention is to use the HTML tab addon to display the HTML markup for people to use to know how to correctly construct our components if they are not using Vue. I am very much not a fan of the idea of needing to include extraneous HTML to get our examples to work.

This might be solvable by using the h() function, but I've never used it before and I'm not clever enough to figure it out on my own yet. Any help is much appreciated.