---
schema_version: "1"
id: 3ab270d7f053e25cdc998c490416ba9d1762307d0d716099c501842435b1eb5a
title: Component Composition
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-composition.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-composition.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 3a88856639e174e8cf13b6c621d174902a3298199790902da861bc2a96e26d8a
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Component Composition

Composing fine-grained components in a larger component enables you to build more interesting components and applications.

Let's see how we can fit components together. We will first create a few simple components: `c:helloHTML` and `c:helloAttributes`. Then, we’ll create a wrapper component, `c:nestedComponents`, that contains the simple components.

Here is the source for `helloHTML.cmp`.

<!-- otherprops: set_clipboard -->
```nolang
<!--c:helloHTML-->
<aura:component>
  <div class="white">
    Hello, HTML!
  </div>
  
  <h2>Check out the style in this list.</h2>
  
  <ul>
    <li class="red">I'm red.</li>
    <li class="blue">I'm blue.</li>
    <li class="green">I'm green.</li>
  </ul>
</aura:component>

```

**CSS source**

<!-- otherprops: set_clipboard -->
```nolang
.THIS {
    background-color: grey;
}

.THIS.white {
    background-color: white;
}

.THIS .red {
    background-color: red;
}

.THIS .blue {
    background-color: blue;
}

.THIS .green {
    background-color: green;
}

```

**Output**

![helloHTML output](https://developer.salesforce.com/media/aura-platform/nested1.png)

Here is the source for `helloAttributes.cmp`.

<!-- otherprops: set_clipboard -->
```nolang
<!--c:helloAttributes-->
<aura:component>
    <aura:attribute name="whom" type="String" default="world"/>
    Hello {!v.whom}!
</aura:component>

```

`nestedComponents.cmp` uses composition to include other components in its markup.

<!-- otherprops: set_clipboard -->
```nolang
<!--c:nestedComponents-->
<aura:component>
    Observe!  Components within components!

    <c:helloHTML/>

    <c:helloAttributes whom="component composition"/>
</aura:component>

```

**Output**

![nestedComponent output](https://developer.salesforce.com/media/aura-platform/nested.png)

Including an existing component is similar to including an HTML tag. Reference the component by its "descriptor", which is of the form _namespace_`:_component_. nestedComponents.cmp` references the `helloHTML.cmp` component, which lives in the `c` namespace. Hence, its descriptor is `c:helloHTML`.

Note how `nestedComponents.cmp` also references `c:helloAttributes`. Just like adding attributes to an HTML tag, you can set attribute values in a component as part of the component tag. `nestedComponents.cmp` sets the `whom` attribute of `helloAttributes.cmp` to "component composition".

## Attribute Passing

You can also pass attributes to nested components. `nestedComponents2.cmp` is similar to `nestedComponents.cmp`, except that it includes an extra `passthrough` attribute. This value is passed through as the attribute value for `c:helloAttributes`.

<!-- otherprops: set_clipboard -->
```nolang
<!--c:nestedComponents2-->
<aura:component>
    <aura:attribute name="passthrough" type="String" default="passed attribute"/>
    Observe!  Components within components!

    <c:helloHTML/>

    <c:helloAttributes whom="{#v.passthrough}"/>
</aura:component>

```

**Output**

![nestedComponents2 output](https://developer.salesforce.com/media/aura-platform/nested2.png)

`helloAttributes` is now using the passed through attribute value.

**note:** `{#v.passthrough}` is an unbound expression. This means that any change to the value of the `whom` attribute in `c:helloAttributes` doesn’t propagate back to affect the value of the `passthrough` attribute in `c:nestedComponents2`. For more information, see [Data Binding Between Components](https://developer.salesforce.com/docs/platform/aura-platform/expr/expr-data-binding.md#data-binding-between-components).

## Definitions versus Instances

In object-oriented programming, there’s a difference between a class and an instance of that class. Components have a similar concept. When you create a `.cmp` resource, you are providing the definition (class) of that component. When you put a component tag in a `.cmp` resource, you are creating a reference to (instance of) that component.

It shouldn't be surprising that we can add multiple instances of the same component with different attributes. `nestedComponents3.cmp` adds another instance of `c:helloAttributes` with a different attribute value. The two instances of the `c:helloAttributes` component have different values for their `whom` attribute .

<!-- otherprops: set_clipboard -->
```nolang
<!--c:nestedComponents3-->
<aura:component>
    <aura:attribute name="passthrough" type="String" default="passed attribute"/>
    Observe!  Components within components!

    <c:helloHTML/>

    <c:helloAttributes whom="{#v.passthrough}"/>

    <c:helloAttributes whom="separate instance"/>
</aura:component>

```

**Output**

![nestedComponent3 output](https://developer.salesforce.com/media/aura-platform/nested3.png)