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

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?

Answer 1

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,