Lightning Component Facets

A facet attribute is similar to any other component attributes,but instead of having a
primitive,collection,sObject or custom class type,it has an "Aura.Component[]" type.
And instead of holding those kind of data,it will hold HTML markups or even another
component.

Note :
A facet is implicitly defined in each component, the body facet.When we reference a subcomponent
writing some HTML markups between the tags that include the component into the container,
we are implicitly setting the body facet.

ex :

<!-- <c:SubComponent> -->


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="topArea" type="Aura.Component[]"/>
    <aura:attribute name="leftArea" type="Aura.Component[]"/>
    <aura:attribute name="rightArea" type="Aura.Component[]"/>
    <aura:attribute name="bottomArea" type="Aura.Component[]"/>
    <div class="mytop">
        {!v.topArea}
    </div>
    <div class="mymiddle">
        <div class="myleft">
            {!v.leftArea}
        </div>
        <div class="myright">
            {!v.rightArea}
        </div>
    </div>   
    <div>
        I am the body!: {!v.body}
    </div>
     <div class="mybottom">
        {!v.bottomArea}
    </div>
</aura:component>

<!--<c:BottomComponent/> -->

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<p>Bottom Area Component html text</p>
</aura:component>

<!--<c:ParentContainer/> -->

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <c:SubComponent>
    <aura:set attribute="topArea">
        <h1>Top Area component</h1>
    </aura:set>
    <aura:set attribute="leftArea">
        <ul>
            <li>Left area app</li> 
            <li>Left area Menu</li> 
            <li>left area App Builder</li> 
        </ul>
    </aura:set>
    <aura:set attribute="rightArea">
            <p>Right area !</p>
        </aura:set>
        <aura:set attribute="bottomArea">
           <c:BottomComponent></c:BottomComponent>
        </aura:set>
    </c:SubComponent>
</aura:component>