To make the code more reusable and maintainable, it is helpful to assemble apps and components using a container and a collection of smaller components. You can use the various base components in the lightning namespace, such lightning-button, to build your own components.

Let’s have a look at a basic app made up of parts. We artificially created the markup in order to show the ideas of owner and container. The amount of c-todo-item instances in a real app would vary and be filled up dynamically in a for:each loop.

 

s<template>

<c-todo-wgrapper>

<c-todo-wgitem item-name=”Coconut”></c-todo-item>

<c-todo-wgitem item-name=”Pillow”></c-todo-item>

</c-todowgrapper>

<template>

 

 

Owner

The component that owns the template is the owner. The c-todo-app component is the owner in this illustration. All the assembled parts that it contains are under the owner’s control. When the owner:

• Set the composite components’ public properties
• Utilize functions on assembled components
• Pay attention to any events that the assembled components may have fired.

 

Container

Although it is contained within the owner component, a container contains additional components. C-todo-wrapper is a container in this illustration. The owner is more powerful than a container. A container can

• Read public attributes in contained components, but not alter them.
• Utilize functions on assembled components
• Listen for some, but not necessarily all, events that are raised by its constituent parts.

 

Parent and Child

We have a containment hierarchy when one component contains another, which might then contain still more components. We occasionally refer to parent and child components in the documentation. A child component is contained by a parent component. The owner or a container are two examples of parent components.

 

Lightning Web Components and Aura Components

Aura and Lightning web components can collaborate in an app thanks to an interoperability layer.

 

Conclusion

In this way, we can have a component that can act as a Container, Child component, or parent web component.

 

To learn more about components, check out some of my related blogs below!

 

Additional Resources

• Trailhead by Salesforce: Handle Events in Lightning Web Components
• Create Lightning Web Components – 1
• Create Lightning Web Components – 2

Cover Photo by Aron Yigin on Unsplash