How to render children into specified named slot in VueJs?

Question

Refer to the code below, currently all the children were rendered inside the default slot even though the slot name is given.

Not sure whether vue createElement function supports named slot?

@Component({
    props:[]
})
export class TestComponent extends Widget{
    items:any[];
    render(h:any){
        const rootcmp = {
            template:`<div>
                Temp:<slot name="temp"></slot>
                Default:<slot></slot>
            </div>`
            , data:()=>{
                return {};
            }
        }
        const cmp = {
            template:'<div slot="default">This is child</div>'
            , data:()=>{
                return {};
            }
        }
        const cmp2 = {
            template:'<div slot="temp">This is child</div>'
            , data:()=>{
                return {};
            }
        }
        return h(rootcmp, [h(cmp), h(cmp2)]);
    }
}

Current behavior:

<div>
Temp:Default:
<div>This is child</div>
<div>This is child</div>
</div>

Expected behavior:

<div>
Temp:
<div>This is child</div>
Default:
<div>This is child</div>
</div>

Labuan

Ive been struggling getting 'h(COMP, null, { default: 90=>..., otherSlots: .()=>...}` working but vuejs isnt replacing the parent slots with the content – Ascension

Confirmed vue2 v Vue3 issue for me: vue2: vuejs.org/v2/guide/render-function.html the children params doesnt accept object notation vue3: v3.vuejs.org/guide/render-function.html#h-arguments the children param has object support HTH – Ascension

Answer 1

It sure does, in your options object, try {slot:'slot-name'}

Laconia