When defining a slot in a Vue.js component template using regular old HTML, it's as simple as this:

<div> <h1>Hello, I am a template!</h1> <slot name="my_slot"></slot> </div>

And it can be activated like so when using the template in your page:

<my-template> <template slot="my_slot"> <p>Slot content.</p> </template> </my-template>

Which should output something like:

<div> <h1>Hello, I am a template!</h1> <p>Slot content.</p> </div>

However, my situation requires that I define my component template using the render function which means the template DOM needs to be set up using nested calls to the createElement function. So my original template definition would now look something like this:

h('div', {}, [ h('h1', { domProps:{ innerHTML: "Hello, I am a template!" } }, []), h('slot', { attrs:{ name: "my_slot" } }, []) ])

However this doesn't work for me. I'm assuming it's because 'slot' isn't a valid html tag but I can't seem to find any clear answer on this specific subject. How can I correctly define slots in a Vue.js component template when using the render function?