Can I pass HTML markup as the content for a LWC slot when used in an Aura component?

Currently I have a LWC that has a <slot> inside of it to allow content between the tags. To test said component, I wanted to spin up a scratch org and quickly create a component. Since we can’t create LWC inside the console, I created an Aura component instead.

The markup is similar to this:

<aura:application extends="force:slds">
    <div class="slds-box">
        <c:tokenLocker recordId="5001A0000000000AAA"
                       passTokenToCallbackClass="true">
            <h1>Hello world!</h1>
            <p>Lorem ipsum, dolor</p>
        </c:tokenLocker>
    </div>
</aura:application>

When the LWC tokenLocker displays the content, I simply get an empty div on screen, and no content is displayed at all.

I looked into the LWC documentation and found that in the section “Pass Markup into Slots” there’s this note right at the beginning of the document:

You can’t pass an Aura component into a slot.

I understand that it is not possible to pass an Aura component, but is this valid for simple HTML tags too?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In Aura, all HTML components are converted to aura:html components:

A meta component that represents all html elements. Any html found in your markup causes the creation of one of these.

In Aura, you can only pass in other LWC because of this limitation. In LWC, you can use both other LWC and HTML elements equally.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating