According to the salesforce documentation (note near the very bottom), "If a Lightning web component contains a slot, you can nest it in an Aura component but you can't use the slot.".
I have tried this and experienced this to be true, but now I have a scenario where this doesn't seem to be true:
I have a screen where clicking a link opens a new subtab, navigating directly to a component. The click handler looks something like this:
clickLink: function(component, event, helper) {
event.preventDefault();
const navService = component.find("navService");
const pageReference = {
type: 'standard__component',
attributes: {
componentName: 'c:returnOrderAuraNav'
},
state: {
//...
}
};
navService.navigate(pageReference);
}
I have an LWC component called returnOrder
, and then I have an Aura component called returnOrderAuraNav
that is used solely for the purpose of enabling navigation (since you can't navigate directly to an LWC - the Aura wrapper implements lightning:isUrlAddressable
and simply includes the LWC component directly inside it).
In my returnOrder
LWC component, I have a child custom modal
component that contains slots. I'm making use of the slots, like this:
<c-modal header-text="Some header text">
<div slot="body">
<p>Content inside the body slot</p>
</div>
<div slot="footer">Content inside the footer slot</div>
</c-modal>
And it works! The body content shows up and is correctly placed in the main body slot and the footer content shows up and is correctly placed in the footer slot.
Shouldn't this not work?