How to extend a standard lightning ui component?

Question

I had the following idea: why not take ui:inputTextArea and extend it to show a little counter that tells you how many characters youve entered.

So i extended ui:inputtextarea, added another attribuge 'count' and wanted to display the attribute below the textbox.

I was not successful appending anything to the text box. Since body-inheritance is a little difficult in lightning, I decided to create some test components first.

PARENT (abstract class)

<aura:component abstract="true" extensible="true">
<aura:attribute name="parent_value" type="string" required="true"/>
<div style="background-color:magenta"> 
Parent: {!v.parent_value} 
</div>
{!v.body} 
</aura:component>

CHILD

<aura:component extends="szDev:parent" extensible="true">
    <aura:attribute name="parent_value" type="String" required="true" default="parent_value"/>
    <aura:attribute name="child_value"  type="String" default="child_value" />
    <ul style="background-color:grey">
        <li>{!v.parent_value}</li>
        <li>{!v.child_value}</li>
    </ul>
</aura:component>

So far, so good. If I display I can see the parent magenta part and the grey child part. Parent_value is 'parent_value', child_value is 'child_value', both values repeated in the bullet point list

GRANDCHILD

<aura:component extends="szDev:child" extensible="true">
    <aura:attribute name="grandchild_value" type="Integer" default="10000"/>
    <aura:set attribute="child_value">
        CHILD
    </aura:set>
    <aura:set attribute="parent_value">
        PARENT
    </aura:set>
    <div style="background-color:yellow">
    {!v.grandchild_value}
    </div>
</aura:component>

Here is where I am stuck. As I would expect, it says now 'PARENT' at the appropriate places as well as Child - both values have been handed upwards to the parent component. I can see the magenta and the grey bullet point parts of my components.

But I nowhere can I see the body of the grandchild component. I cannot understand why the grandchild component behaves differently, why the grandchild_value is not display in a yellow div. A little bit of enlightenment would be very appreciated

Sz

Answer 1

Extension can be very confusing! Try adding {!v.body} to your child component so that it knows where to put the content passed in from grandchild.

<aura:component extends="szDev:parent" extensible="true">
    <aura:attribute name="parent_value" type="String" required="true" default="parent_value"/>
    <aura:attribute name="child_value"  type="String" default="child_value" />
    <ul style="background-color:grey">
        <li>{!v.parent_value}</li>
        <li>{!v.child_value}</li>
    </ul>
<!--ADDED THIS->
    {!v.body}
</aura:component>

See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/oo_cmp_attributes.htm