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?
slotChange
event as mentioned in the doc.developer.salesforce.com/docs/component-library/documentation/…overlayLibrary
to work with LWCs, though it's much cleaner to omit the footer at the moment. I've done this and it works surprisingly well.