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?
Best Answer
The lwc documentation states:
So, adding HTML within a Slot within an lwc that is embedded in an Aura component shouldn't cause any trouble.
However, I agree that the documentation you linked, which states:
Seems rather confusing.