Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Component Body

The root-level tag of every component is <aura:component>. Every component inherits the body attribute from <aura:component>.

The body attribute has type Aura.Component[]. It can be an array of one component, or an empty array, but it's always an array.

In a component, use “v” to access the collection of attributes. For example, {!v.body} outputs the body of the component.

Setting the Body Content

To set the value of an inherited attribute, use the <aura:set> tag.

There are only a few tags that are allowed inside <aura:component>. These include but are not limited to <aura:attribute>, <aura:registerEvent>, <aura:handler>, and <aura:set>. Any free markup that is not enclosed in one of the tags allowed in a component is assumed to be part of the body. It's equivalent to wrapping that free markup inside <aura:set attribute="body">. Since the body attribute has this special behavior, you can omit <aura:set attribute="body">.

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2    <div>Body part</div>
3    <ui:button label="Push Me/>
4</aura:component>
5

This is a shortcut for:

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:component>
2    <aura:set attribute="body>
3        <div>Body part</div>
4        <ui:button label="Push Me/>
5    </aura:set>
6</aura:component>
7

The same logic applies when you use any component that has a body attribute, not just <aura:component>. For example:

1swfobject.registerObject("clippy.codeblock-2", "9");<ui:panel>
2    Hello world!
3</ui:panel>
4

This is a shortcut for:

1swfobject.registerObject("clippy.codeblock-3", "9");<ui:panel>
2    <aura:set attribute="body">
3        Hello World!
4    </aura:set>
5</ui:panel>
6

Accessing the Component Body

To access a component body in JavaScript, use component.get("v.body").