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

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>

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.