Can lightning component attribute of type aura component have references to attributes from the same component?

Question

I am trying to create a simple component:

<aura:component implements="force:appHostable">

    <aura:attribute name="mystr" type="String" required="false" default="hello world" access="private" description="" />

    <aura:attribute name="mycmp" type="Aura.Component[]" access="public" description="test">
        <span>{! v.mystr }</span>
    </aura:attribute>

</aura:component>

When I try to include this component into a lightning app, I receive an error saying:

This page has an error. You might just need to refresh it.
Error during init [Assertion Failed!: Unable to get value for key 'v.mystr'. No value provider was found for 'v'. : false]

Is it working as expected or is it bug?

P.S. switching access to public does not have any affect.

Added on 2017-01-21

What I am trying to achieve is to define snippets inside the component that I can either include in different places inside the same component or set as body inside another component that is created dynamically.

Using example above I would like to reference {! v.mycmp } in different places inside the same component to render the same element in different places on the page. As @javanoob pointed out in his posts, the code above works if reference to {! v.mystr } is replaced with expression . However, when I tried to use it with some other tags like where items has a reference to an attribute inside my main component, the main component doesn't render again with the same error.

This leads me back to the original question: Is it me trying to use aura:attribute of type Aura.Component[] outside its intended purpose or aura:attribute not behaving correctly?

Added on 2017-01-22

Summarising the solution from javanoob, the aura:attribute can be replaced by a basic component like

<aura:component>{! v.body }</aura:component>

and be used as an attribute. It can be hidden from the page using standard css approach.

I would personally expect to declare complex attributes without the need for placeholders like this. It works as a workaround though.

Answer 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 :)