Composed Lightning Web Component with slots and conditional rendering

Question

Use Case

I'm building a LWC to use as a modal template (leaving a slot for the body) so all the logic from the modal can be handled there and reuse it for multiple modals

---

Example

Here's the component, let's call it modal:

HTML:

<template>
    <template if:true={open}>
        <div>
            <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <lightning-button-icon class="slds-modal__close" icon-name="utility:close" onclick={closeModal}></lightning-button-icon>
                        <h2>Test</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium">
                        <slot name="body"></slot>
                    </div>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </template>
</template>

JS:

import { LightningElement, api, track } from 'lwc';

export default class ModalTemplate extends LightningElement {

    @track open = false;

    @api 
    openmodal() {
        this.open = true
    }

    closeModal() {
        this.open = false
    } 
}

I'm using that modal component in another, let's call it testComp

HTML:

<template>
    <lightning-button label="Show Modal" onclick={open}></lightning-button>
    <c-modal>
        <span slot="body">Modal body</span>
    </c-modal>
</template>

JS:

import { LightningElement, api } from 'lwc';

export default class Modal extends LightningElement {

    open() {
        this.template.querySelector('c-modal').openmodal();
    }
}

---

Problem

This works great the first time I open the modal using the "Show Modal" button, however when I close the modal and press again the "Show Modal" button to open the modal one more time I receive the following error:

Uncaught (in promise) TypeError: Cannot redefine property: nodeValue
    at defineProperties (<anonymous>)
    at patchElementWithRestrictions (aura_proddebug.js:5005)
    at createElmHook (aura_proddebug.js:5088)
    at Object.create (aura_proddebug.js:5302)
    at createChildrenHook (aura_proddebug.js:5171)
    at Object.insert (aura_proddebug.js:5312)
    at createChildrenHook (aura_proddebug.js:5172)
    at Object.insert (aura_proddebug.js:5312)
    at createChildrenHook (aura_proddebug.js:5172)
    at Object.insert (aura_proddebug.js:5312)

I've noticed that if I remove the "sloting" capability from the modal component it works fine, it seems is related to trying to rebuild the slot.

What I'm doing wrong and how can I achieve it?

Answer 1

The problem that you have is that your modal is destroying the slots , but the component that define the slots is keeping they alive