Component Facets

The body attribute is an example of a facet. The only difference between facets that you define and v.body is that the shorthand of optionally omitting the aura:set tag only works for v.body.

To define your own facet, add a aura:attribute tag of type Aura.Component[] to your component. For example, let's create a new component called facetHeader.cmp.

Component source

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2    <aura:attribute name="header" type="Aura.Component[]"/>
3
4    <div>
5        <span class="header">{!v.header}</span><br/>
6        <span class="body">{!v.body}</span>
7    </div>
8</aura:component>
9
10

This component has a header facet. Note how we position the output of the header using the v.header expression.

The component doesn't have any output when you access it directly as the header and body attributes aren't set. The following component, helloFacets.cmp,sets these attributes.

Component source

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:component>
2    See how we set the header facet.<br/>
3
4    <auradocs:facetHeader>
5
6        Nice body!
7
8        <aura:set attribute="header">
9            Hello Header!
10        </aura:set>
11    </auradocs:facetHeader>
12
13</aura:component>
14
15