Inherited Component Attributes

A sub component that extends a super component inherits the attributes of the super component.

Attribute values are identical at any level of extension. There is an exception to this rule for the body attribute, which we’ll look at more closely soon.

Let’s start with a simple example. c:super has a description attribute with a value of “Default description”,

1<!--c:super-->
2<aura:component extensible="true">
3    <aura:attribute name="description" type="String" default="Default description" />
4
5    <p>super.cmp description: {!v.description}</p>
6
7    {!v.body}
8</aura:component>

Don’t worry about the {!v.body} expression for now. We’ll explain that when we talk about the body attribute.

c:sub extends c:super by setting extends="c:super" in its <aura:component> tag.

1<!--c:sub-->
2<aura:component extends="c:super">
3    <p>sub.cmp description: {!v.description}</p>
4</aura:component

Note that sub.cmp has access to the inherited description attribute and it has the same value in sub.cmp and super.cmp.

Use <aura:set> in the markup of a sub component to set the value of an inherited attribute.

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.

Let’s look at a simple example to understand how the body attribute behaves at different levels of component extension. We have three components.

c:superBody is the super component. It inherently extends <aura:component>.

1<!--c:superBody-->
2<aura:component extensible="true">
3    Parent body: {!v.body}
4</aura:component>

At this point, c:superBody doesn’t output anything for {!v.body} as it’s just a placeholder for data that will be passed in by a component that extends c:superBody.

c:subBody extends c:superBody by setting extends="c:superBody" in its <aura:component> tag.

1<!--c:subBody-->
2<aura:component extends="c:superBody">
3    Child body: {!v.body}
4</aura:component>

c:subBody outputs:

1Parent body: Child body:

In other words, c:subBody sets the value for {!v.body} in its super component, c:superBody.

c:containerBody contains a reference to c:subBody.

1<!--c:containerBody-->
2<aura:component>
3    <c:subBody>
4        Body value
5    </c:subBody>
6</aura:component>

In c:containerBody, we set the body attribute of c:subBody to Body value. c:containerBody outputs:

1Parent body: Child body: Body value

See Also