1

Problem

Trying to build a reusable component that I can pass components (lightning-button(s) for example) into.

Troubleshooting Attempted

ParentComponent (.html)

<template>
     <slot name="header"></slot>
     <slot name="footer"></slot>
</template>

ChildComponent (.html)

<template>
   <c-parent-component>
     <div slot="header">
          <lightning-button label="Header Button 1"></lightning-button>
          <lightning-button label="Header Button 2"></lightning-button>
     </div>
     <div slot="footer">
          <lightning-button label="Footer Button 1"></lightning-button>
          <lightning-button label="Footer Button 2"></lightning-button>
     </div>
   </c-parent-component>
</template>
1
  • 2
    Here's your code. It works fine. Maybe there's something else you're doing wrong?
    – sfdcfox
    May 18, 2022 at 23:19

1 Answer 1

0

Our issue was we had a <lightning-card> component wrapping the child component that interfered with the slots (not shown in the original question). Went down a rabbit hole thinking named slots and unnamed slots worked different with elements vs. text content, which was NOT the case. They both take in elements the same way.

<lightning-card> natively has slots and use of slots in the card failed to pass it up.

The above code works as sdfcfox mentioned:

ParentComponent (.html)

<template>
     <slot name="header"></slot>
     <slot name="footer"></slot>
</template>

ChildComponent (.html)

<template>
   <c-parent-component>
     <div slot="header">
          <lightning-button label="Header Button 1"></lightning-button>
          <lightning-button label="Header Button 2"></lightning-button>
     </div>
     <div slot="footer">
          <lightning-button label="Footer Button 1"></lightning-button>
          <lightning-button label="Footer Button 2"></lightning-button>
     </div>
   </c-parent-component>
</template>

You must log in to answer this question.

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