6

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?

3
3

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

1
  • You’re right, in the end I added the conditional rendering to the parent component, this way if the component is not rendered then the modal and the slotted content will be drestroyed and therefore once they’re created again it would be new slots, therefore no redefining issue – jonathanwiesel Mar 30 '19 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.