2

In LWC, when using a custom modal component, I'm able to pass in markup to my modal body using slots like so.

<c-custom-modal>
        <lightning-card slot="main">
            <h1>This mark up is passed to modal body main slot</h1>
      </lightning-card>
</c-custom-modal>

I would like to do something similar using the ootb "lightning-modal" component, but I'm not seeing a way to pass in markup. Is there a way to pass in markup to a modal built with "lightning-modal"?

1 Answer 1

2

lightning-modal is what we'd call an abstract component. In other words, you won't be able to write:

<lightning-modal>
  <div slot="body">My Content Goes Here</div>
</lightning-modal>

Because that's not how this component is designed to work. Instead, it provides the framework for creating your own custom modals, like this:

// customModal.js
import LightningModal from "lightning/modal";

export default class CustomModal extends LightningModal {
}
<template>
  <!-- customModal.html -->
  <lightning-modal-header><slot name="header"></slot></lightning-modal-header>
  <lightning-modal-body><slot name="body"></slot></lightning-modal-body>
  <lightning-modal-footer><slot name="footer"></slot></lightning-modal-footer>
</template>

Which you'd then use as:

<c-custom-modal>
  <div slot="body">My Content Here</div>
</c-custom-modal>

Which is essentially the same as your own. The reason why Salesforce provides this component is so that developers can automatically receive the latest styling and markup from SLDS, rather than having to maintain the entire component's UI. This reduces the amount of maintenance a developer has to deal with.

4
  • you are awesome. I'm not sure what I was doing wrong but I did try doing what you've mentioned above but wasn't finding success. I tried again this morning after your comment and now I'm all good. Thank you! Jun 26, 2023 at 13:47
  • @SalCarrera You're welcome!
    – sfdcfox
    Jun 26, 2023 at 13:52
  • I may have spoken too soon, when actually launching the modal I'm not seeing the the markup passed in to the slot. When initializing my modal like this <c-base-modal></c-base-modal> I see my components markup in the dom but not centered, it's in the dom like a normal div, but not as a modal. When launching my modal onclick, the modal pops up as expected but without the markup passed into the slots. Jun 26, 2023 at 18:10
  • @SalCarrera What's the context? The component depends on SLDS, so it only works if SLDS is available.
    – sfdcfox
    Jun 26, 2023 at 20:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .