Calling slot not being removed the first time

[pdcmoreira]

I'm trying out components with slots and something weird is happening.
My component is a bootstrap modal, I made it work by passing the boolean prop showEditStateModal which shows or hides the modal. It has a header, body (default) and a footer slot.

The problem is, the first time I open the modal after the page load, it correctly copies the slot div to the right place, but also copies it to the default slot (body).
The dom looks like this:

<div class="modal-content">
    <div class="modal-header undefined">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">edit state</h4>
    </div>
    <div class="modal-body">
        <p slot="footer">x</p>
    </div>
    <div class="modal-footer">
        <p slot="footer">x</p>
    </div>
</div>

After I close the modal, it correctly copies the element to the footer only. It's only the first time that I open the model that the problem happens.

Also, theres another problem, since I'm not giving any content besides the footer slot, the default slot (body), that is in the component's template, should be printed. So I should see "xyz" in the body, but it's empty.

Here are my templates:

Parent:

<modal v-bind:show.sync="showEditStateModal" title="edit state">
    <p slot="footer">x</p>
</modal>

Component:

<script type="x-template" id="modal-template">
    <div class="modal fade" tabindex="-1" role="dialog"
        v-modal="show"
        v-if="show">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header {{headerClass}}">
                    <slot name="header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" v-if="title" v-text="title"></h4>
                    </slot>
                </div>
                <div class="modal-body">
                    <slot>xyz</slot>
                </div>
                <div class="modal-footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </div>
</script>

[pdcmoreira]

I found the culprit to be the v-if="show". Without it, it works as expected.
For the second "problem", I've read the documentation again and it doesn't say that we can mix a "fallback" slot with named slots. I assumed that it would let me do that, but I was wrong.

[yyx990803]

Can you make a jsfiddle reproduction?

[pdcmoreira]

http://jsfiddle.net/p2ezf08f/1/

I kind of understand why it has that behavior, so maybe it's working as intended.
Also, as I said, in the docs it doesn't say that we can do that, so I guess we can't.