Vue named slots do not work when wrapped

I have a responsive-menu component which I want to use named slots inside of this up my template markup:

<template>
    <div class="responsive-menu">
        <div class="menu-header">
            <slot name="header"></slot>
        </div>
    </div>
</template>

Whenever I try my named slot like this it work perfectly fine:

<responsive-menu>
    <h3 slot="header">Responsive menu header</h3>
</responsive-menu>

However as soon as I wrap it with a class nothing shows up anymore.

<responsive-menu>
    <div class="container">
        <h3 slot="header">Responsive menu header</h3>
    </div>
</responsive-menu>

What is going on here? Shouldn't I just be able to wrap the named component? Which does it appear that my named slots need to be direct children of my Vue component?

Solution

It does not work because your "wrapped slot" isn't direct child of responsive-menu tag.

try something like that:

<responsive-menu>
    <div class="container" slot="header">
        <h3>Responsive menu header</h3>
    </div>
</responsive-menu>

jsfiddle