Extending Lightning Components not working

In the abstract component you need to place the body:

<p>This is inside abstract</p>
{!v.body}

which is where the extending component's content is placed.

(When I had this problem I didn't manage to find an explicit explanation, just that examples had the {!v.body} in the abstract component.)

I can't say that I have firsthand experience delving into the markup inheritance hierarchy, but I think the way it's explained under Inherited Body Attribute makes some sense of it - it being this requirement to include {! v.body } within the component markup of an abstract base component.

The inheritance behavior of body is different than other attributes. It can have different values at each level of component extension to enable different output from each component in the inheritance chain...

The default renderer for a component iterates through its body attribute, renders everything, and passes the rendered data to its super component. The super component can output the data passed to it by including {!v.body} in its markup. If there is no super component, you've hit the root component and the data is inserted into document.body.

There's also a concrete example provided.

This is sensical upon reflection (I think): if the inheritance hierarchy in the body weren't inverted in this fashion (super enclosing sub, rather than sub building on super), there wouldn't be a clear place for markup from the subcomponent to slot in.