0

I've simple lightning component let say test.cmp like below. Note that I marked extensible="true"

<aura:component implements="force:appHostable" extensible="true">
    <aura:attribute name = "attInherit" type = "string" default = "This is inherited in other component" access = "public"/> 
</aura:component>

Now I've another lightning component lete say test2.comp , which is like this :

 <aura:component implements="force:appHostable" extends = "c:test" >
   <aura:set attribute = "attInherit" value = "overrideValuefromParent" />
     
    <div style="max-width: 400px;">
       <p><lightning:formattedText value="Email info@salesforce.com" /></p>
    </div>
</aura:component>

If I add this component in some app and try to display it, it shows blank. but if I remove markup extends= "c:test" from this 2nd component, then it works fine( it properly shows value as Email info@salesforce.com) Why so ?

1

You don't have body attribute which is a facet in which the components content is rendered.

Read this link, i have pasted relevant content below

<aura:component  extensible="true">

 <aura:attribute name = "attInherit" type = "string" default = "This is inherited in other component" access = "public"/>   
{!v.body}
</aura:component>

The child's content is rendered in the body attribute of the super component. test in your case.

Inherited body Attribute Every component inherits the body attribute from aura: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. This will be clearer when we look at an example.

Any free markup that is not enclosed in another tag is assumed to be part of the body. It's equivalent to wrapping that free markup inside <aura:set attribute="body">.

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.

2 observations:

  1. Use LWC over aura
  2. If you want to use aura. use composition over inheritance since salesforce documentation very clearly states you to avoid using it.
1
  • Yes, will eventually move into LWC soon !. I know composition is preferred but just wanted to get some basics around inheritence – sfdc_Qrius Feb 21 at 8:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.