Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers. Visit Stack Exchange

Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.

Sign up to join this community

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Why won't an iframe load in a Lightning component if it extends another Lightning component?

Ask Question

I am building a Lightning component that loads an iframe of an internal app. I've brought the component down to its minimum valuable component and I still have the problem.

The component with the iframe:

<aura:component
        implements="flexipage:availableForAllPageTypes"
        extends="c:SimpleBase"
        description="SimpleIframeComponent">
    <iframe src="https://example.com/"
            width="100%"
            height="500px"
            frameBorder="0" />
</aura:component>
The base component:
<aura:component description="SimpleBase" extensible="true" abstract="true">
</aura:component>
So long as I do not extend SimpleBase, the iframe loads. But if I do extend SimpleBase, the iframe won't load.
There are no errors in the developer log (console). Also, watching the network in developer tools, the URL doesn't even load, so it appears the component doesn't render at all when it extends the base component.
Why won't an iframe load in a Lightning component if it extends another Lightning component?
                Yes, there are no errors in developer log. Note, there is no custom Javascript (no controller or helper).
– Swisher Sweet
                Dec 13, 2019 at 21:39
You need to use {!v.body} in super component SimpleBase without which the body of sub-component will not load.
Reason: (REFERENCE)
  
sub component’s body is evaluated and passed to a super component to
  use as {!v.body} and that super component’s body is evaluated and is
  passed to its super component,