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>
Best Answer
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)
ChildComponent (.html)