Inherited Component Attributes

Inherited attributes behave differently than, for example, inherited class fields in Java. An attribute that is inherited from a base component can have different values in the sub-component and the base component. This will be clearer when we walk through an example.

Use <aura:set> in a sub-component to set the value of any attribute on the super component or to set an attribute on a component reference.

We will be looking at the body attribute for each of our sample components so now is a good time for a quick refresher. <aura:component> has a body attribute that is inherited by all components. 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">. {!v.body} outputs the body of the component.

The default renderer for a component iterates through its body attribute, renders everything, and passes the rendered data to its super component. 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.

auradocs:parent is the parent or super component. It inherently extends <aura:component>.

parent.cmp

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component extensible="true">
2    Parent body: {!v.body}
3</aura:component>
4

At this point, auradocs:parent doesn’t render the body attribute since we haven’t set it yet.

You can only extend a component that has its extensible system attribute explicitly set to true. The extensible system attribute is defined in <aura:component>. sampleBase.cmp can be extended because it sets extensible="true".

auradocs:child extends auradocs:parent by setting extends="auradocs:parent" in its <aura:component> tag.

child.cmp

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:component extends="auradocs:parent">
2    Child body: {!v.body}
3</aura:component>
4

auradocs:child renders this body value.

1Parent body: Child body:

In other words, auradocs:child sets the body attribute of its super component, auradocs:parent.

auradocs:container contains a reference to auradocs:child.

container.cmp

1swfobject.registerObject("clippy.codeblock-3", "9");<aura:component>
2    <auradocs:child>
3        Body value
4    </auradocs:child>
5</aura:component>
6

In auradocs:container, we set the body attribute of auradocs:child to Body value. auradocs:container renders this body value.

1Parent body: Child body: Body value