Component Facets

A facet is any attribute of type Aura.Component[]. The body attribute is an example of a facet.

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

<!--c:facetHeader-->
<aura:component>
    <aura:attribute name="header" type="Aura.Component[]"/>

    <div>
        <span class="header">{!v.header}</span><br/>
        <span class="body">{!v.body}</span>
    </div>
</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.

<!--c:helloFacets-->
<aura:component>
    See how we set the header facet.<br/>

    <c:facetHeader>

        Nice body!

        <aura:set attribute="header">
            Hello Header!
        </aura:set>
    </c:facetHeader>

</aura:component>

Note that aura:set sets the value of the header attribute of facetHeader.cmp, but you don’t need to use aura:set if you’re setting the body attribute.