Compose Components

It’s useful to compose apps and components with a set of smaller components to make the code more reusable and maintainable. The lightning namespace contains many base components, such as lightning-button, that you can use to build your components.

Let’s look at a simple app composed of components. The markup is contrived because we want to illustrate the concepts of owner and container. In a real app, the number of c-todo-item instances would be variable and populated dynamically in a for:each loop.

Owner

The owner is the component that owns the template. In this example, the owner is the c-todo-app component. The owner controls all the composed components that it contains. The owner can:

  • Set public properties on composed components
  • Call methods on composed components
  • Listen for any events fired by the composed components
Container

A container contains other components but itself is contained within the owner component. In this example, c-todo-wrapper is a container. A container is less powerful than the owner. A container can:

  • Read, but not change, public properties in contained components
  • Call methods on composed components
  • Listen for some, but not necessarily all, events bubbled up by components that it contains.
Parent and child

When a component contains another component, which, in turn, can contain other components, we have a containment hierarchy. In the documentation, we sometimes talk about parent and child components. A parent component contains a child component. A parent component can be the owner or a container.

See Also