CustomComponent1.xml

<!--
Custom Component1
This component will include all different component from different namespace
to demonstrate locker service
@author Manish Choudhari
-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="showAll" type="String" default="none" />
    
    <lightning:card title="I am Parent Custom Component sits within 'c' namespace">
        <aura:set attribute="actions">
            <lightning:button variant="brand" label="Read All Important Data" onclick="{! c.readAllData }" />
        </aura:set>
        <lightning:layout multipleRows="true">
            <lightning:layoutItem flexibility="auto" padding="horizontal-medium">
                <!-- This card holds custom component from "c" namespace -->
                <lightning:card aura:id="card-custom" class="card-container">
                    <aura:set attribute="title">
                        1. Custom Component - <strong style="color:blue;">(c:CustomComponent2)</strong>
                    </aura:set>
                    
                    <lightning:button variant="success" class="read-button" 
                                      label="Read My Data" onclick="{! c.readCustomComponent }" />
                    <div class="div-container" id="div-custom">
                        <c:CustomComponent2 />
                    </div>
                    <div id="custom-output" class="read-button">
                    </div>
                </lightning:card>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="horizontal-medium">
                <!-- This card holds outputText component from to "ui" namespace -->
                <lightning:card aura:id="card-html" class="card-container">
                    <aura:set attribute="title">
                        2. OOTB component - <strong style="color:blue;">(ui:outputText)</strong>
                    </aura:set>
                    
                    <lightning:button variant="success" class="read-button" 
                                      label="Read My Data" onclick="{! c.readUIComponent }" />
                    <div class="div-container" id="div-ui">
                        <p id="l-paragraph">
                            <ui:outputText value="I am UI component"/>
                        </p>
                    </div>
                    <div id="ui-output" class="read-button">
                    </div>
                </lightning:card>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="horizontal-medium">
                <!-- This card holds managed package component from "SFFscts" namespace -->
                <lightning:card aura:id="card-managed" class="card-container">
                    <aura:set attribute="title">
                        3. Managed Package Component - <strong style="color:blue;">(SFFscts:CheckBalance)</strong>
                    </aura:set>
                    
                    <lightning:button variant="success" class="read-button" 
                                      label="Read My Data" onclick="{! c.readMPComponent }" />
                    <div class="div-container" id="div-managed">
                        <SFFscts:CheckBalance />
                    </div>
                    <div id="managed-output" class="read-button">
                    </div>
                </lightning:card>
            </lightning:layoutItem>
        </lightning:layout>
        <div style="{! 'display:'+v.showAll}">
            <p style="color:red;" class="read-button">CUSTOM COMPONENT: </p><div id="all-custom-output"  class="read-button"/>
            <p style="color:red;" class="read-button">UI COMPONENT: </p><div id="all-ui-output"  class="read-button"/>
            <p style="color:red;" class="read-button">MANAGED COMPONENT: </p><div id="all-managed-output"  class="read-button"/>
            <p style="color:red;" class="read-button">SYSTEM/UNDOCUMENTED API: </p><div id="all-system-output"  class="read-button"/>
        </div>
    </lightning:card>
</aura:component>