Component Facets

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

1<!--c:facetHeader-->
2<aura:component>
3    <aura:attribute name="header" type="Aura.Component[]"/>
4
5    <div>
6        <span class="headerClass">{!v.header}</span><br/>
7        <span class="bodyClass">{!v.body}</span>
8    </div>
9</aura:component>

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. Let’s create another component, helloFacets.cmp, that sets these attributes.

1<!--c:helloFacets-->
2<aura:component>
3    See how we set the header facet.<br/>
4
5    <c:facetHeader>
6
7        This is the component body for facetHeader.
8
9        <aura:set attribute="header">
10            Hello Header!
11        </aura:set>
12    </c:facetHeader>
13
14</aura:component>

The aura:set tag sets the value of the header attribute of facetHeader.cmp.

The body attribute is special. You don’t need to use aura:set if you’re setting the body attribute. Any free markup that’s not enclosed in one of the tags allowed in a component is assumed to be part of the body and is set in the body attribute.

If you use c:helloFacets in an app, the output is:

1See how we set the header facet.
2Hello Header!
3This is the component body for facetHeader.