@Praveen, yes, this is totally normal. Here is what is happening:
When we say that the body attribute is defined on all components we mean that it's defined on the base <aura:component/>
from which all components inherit. Here is a simplified version.
<aura:component/>
<aura:attribute name="body" type="Aura.Component[]"/>
{!v.body}
</aura:component>
As you can see, the base component outputs the body tag that it receives in its own body, otherwise, nothing would be rendered. Angular calls that process "transclusion", the inclusion of content from another context.
When you write this:
<aura:component>
<div>Body part</div>
<ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>
You are setting the body tag of the parent component. Everything defined in your component is the "lexical definition", and it's passed to its parent. If you want to read it, you could use cmp.getSuper().get("v.body")
but it's a deprecated API, and it will probably not work. However, that's the idea behind it.
Why is it working like this? Let's call your component c:myComponent
and use it inside an app:
<c:myComponent>
<i>Instance Part</i>
</c:myComponent>
This is equivalent to this format:
<c:myComponent>
<aura:set attribute="body>
<i>Hello</i>
</aura:set>
<c:myComponent>
As you see, every component needs to receive an attribute body independently of what it defines internally. You can try this format, it does work, but it's unnecessary except to illustrate how to set the body of a component.
Now, your component can ignore its body attribute as in your original code, or it can use it like this:
<aura:component>
<div>Body part</div>
{!v.body}
<ui:button label="Push Me" press="{!c.printCmpBody}"/>
</aura:component>
You can place the expression {!v.body}
anywhere you want.
The rendered content will then be equal to the instance's v.body
plus the component-defined lexical definition:
v.body = <i>Instance Part</i>
+
lexical scope = <div>Body part</div>{!v.body}...
=
Rendered: <div>Body part</div><i>Instance Part</i>...
You can get more information on how the attribute body works by looking at slides 24, 25, and 27:
Mastering the Lightning Framework - Part 1
And the explications are at around 15:00 minute here:
Mastering the Lightning Framework - Part 1
I read the documentation you mentioned in the comments and it says attribute of type Aura.Component[]
is called a facet. Then I checked the documentation about Component facet and came up with the below working example on how to use the attribute type List
in other attribute of type Aura.Component[]
:
HelloWorld.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="bar" type="Aura.Component[]">
</aura:attribute>
{!v.bar}
</aura:component>
HellWorld.app:
<aura:application extends="force:slds">
<aura:attribute name="foo" type="List" default="['red','blue','green']"/>
<c:HelloWorld>
<aura:set attribute="bar">
<aura:iteration items="{!v.foo}" var="item">
<p><aura:text value="{!item}"></aura:text></p>
</aura:iteration>
</aura:set>
</c:HelloWorld>
</aura:application>
Output:

UPDATE:
I did not work much on Lightning but I was curious on how to solve the issue you are talking about in comments so I came up with this example:
HelloWorld.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="bar" type="Aura.Component[]" access="global">
</aura:attribute>
<aura:attribute name="baz" type="Aura.Component[]" access="global">
</aura:attribute>
<aura:attribute name="componentNumber" type="String" access="global">
</aura:attribute>
Below are the contents of {!v.componentNumber} component: <br></br>
<div style="background-color:red">{!v.bar}</div>
<div style="background-color:yellow">{!v.baz}</div>
<div style="background-color:green">{!v.body}</div>
</aura:component>
HelloWorldApp.app
<aura:application extends="force:slds">
<aura:attribute name="foo1" type="List" default="['red','blue','green']"/>
<aura:attribute name="foo2" type="List" default="['Orange','Apple','Mango']"/>
<c:HelloWorld aura:id="first" componentNumber="1">
<aura:set attribute="bar" >
<aura:iteration items="{!v.foo1}" var="item" indexVar="i">
<p><aura:text value="{! i + ':' + item}"></aura:text></p>
</aura:iteration>
</aura:set>
</c:HelloWorld>
<c:HelloWorld aura:id="second" componentNumber="2">
<aura:set attribute="bar" >
<aura:iteration items="{!v.foo2}" var="item" indexVar="i">
<p><aura:text value="{! i + ':' + item}"></aura:text></p>
</aura:iteration>
</aura:set>
</c:HelloWorld>
<div></div>
<ui:button label="Update first component with second component body"
press="{!c.updateFirstCmp}"/>
</aura:application>
HelloWorldAppController.js:
({
updateFirstCmp : function(component, event, helper) {
debugger;
var secondCmpBdy = component.find('second').get('v.bar');
// Setting the attribute of type Aura.Component[] of first HelloWorld Component from
// second HelloWorld component attribute of type Aura.Component[]
component.find('first').set('v.baz',secondCmpBdy);
// Setting the body(type Aura.Compoent[] as per docs) of first HelloWorld Component
// from second HelloWorld component attribute of type Aura.Component[]
component.find('first').set('v.body',secondCmpBdy);
}
})
Output:

After clicking on the button: (second component still exists on the page while the content is copied to first component)

I am learning a lot from this question :)
Best Answer
Use namespace instead of c in $Lightning.use() and $Lightning.createComponent()