How can I output the <template /> tag to the DOM in Vue.js

Question

I have a custom library built on Stencil that I need to integrate with Vue, and this library relies on the browser's <template /> tag.

For example, I need to render the following code to the dom:

<my-custom-list>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
  </template>
</my-custom-list>

my-custom-list will then get whatever is inside the template and use it for each of the items in the list.

I managed to get it to work by using the v-html directive, for example:

<my-custom-list v-html="<template><my-custom-title></my-custom-title><my-custom-description></my-custom-description></template>">
</my-custom-list>

However, I would also like to be able to use Vue components inside this template tag, like:

<my-custom-list>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
    <custom-vue-component></custom-vue-component>
  </template>
</my-custom-list>

Some old answers online suggest using the is directive to be able to output the template tag, like <div is="template"> but that has been deprecated.

I am not even sure if this is possible, but any insights would be much appreciated.

Answer 1

You can use the v-pre directive to skip compilation for parts of your components.

<my-custom-list v-pre>
  <template>
    <my-custom-title></my-custom-title>
    <my-custom-description></my-custom-description>
    <custom-vue-component></custom-vue-component>
  </template>
</my-custom-list>