Pass Elements into Named Slots - Nothing Rendered

Question

Problem

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

Troubleshooting Attempted

• An unnamed single slot passes the "header" button in just fine.
• Passing different element types in child component (span vs. div)
• Use of querySelector to set a {variable} on the parent component.
• Read: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_components_best_composition and attempted to use an event to let the parent component know the child component has loaded.

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>

Answer 1

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>