Why do LWC slots work inside this nested Aura component?

Question

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?

Answer 1

The lwc documentation states:

!IMPORTANT You can’t pass an Aura component into a slot. This limitation also applies to a Lightning web component that’s nested in an Aura component.

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:

IMPORTANT If a Lightning web component contains a slot, you can nest it in an Aura component but you can't use the slot.

Seems rather confusing.

Answer 2

You can't use slots from Aura, nor can you include Aura components in LWC at all. If you have a LWC, and that LWC has other LWCs inside of it, you can use those slots normally.

Not Allowed

<!-- aura -->
<c:my-lwc>
  <c:my-other-component slot="someSlot" />
</c:my-lwc>

---

<!-- aura -->
<c:my-lwc>
  <aura:set attribute="someSlot">
    <c:my-other-component />
  </aura:set>
</c:my-lwc>

---

<!-- lwc -->
<c-my-lwc>
  <c-my-aura-component slot="someSlot"></c-my-aura-component>
</c-my-lwc>

Allowed

<!-- lwc -->
<c-my-lwc>
  <c-my-other-lwc slot="someSlot"></c-my-other-lwc>
</c-my-lwc>

---

Stated differently, one can say that once you're in LWC context, you can't get back to Aura (all children of a LWC component must themselves be a LWC component).