cq:isContainer Property in AEM

 It’s a common use case to create components that include other components. These components are called “Container Components” e.g. parsys, etc and are denoted by adding cq:isContainer="{Boolean}true" as a property on the component.

Why is it important to add cq:isContainer property to container component?

The answer is simple to make sure the component must behave like a container component. You must be thinking what does it even mean? Let's understand this with an example.

I have 3 components, component-container, component-a, component-b

The component structure would be:

component-container

|----- component-a

|----- component-b

i.e.

/apps/weretail/components/demo/component-container/component-container.html

   <div class="c-component-container">

      <div data-sly-resource="${'a' @ resourceType='/apps/weretail/components/demo/component-a'}"/>

      <div data-sly-resource="${'b' @ resourceType='/apps/weretail/components/demo/component-b'}"/>

    </div>

What happens if component-container does not have cq:isContainer property

1. From the Content Tree the hierarchy does not maintain.

2. Let's try to create a livecopy of this page and break the inheritance of the parent component i.e. component-container component 

Livecopy without inheritance broken

After breaking the inheritance for component-container, the inheritance is broken for children components(component-a and component-b) as well. That was not the expectation.

Let's check above 2 scenarios again with cq:isContainer property

The component hierarchy maintains when view content from the Content Tree

The inheritance for children component is not broken when breaking the parent component i.e. component-container component inheritance.

Conclusion

Whenever you create a container component make sure you create proper configuration for the parent component. That could be adding cq:isContainer property or not allowing deleting childer component 

by adding cq:childEditConfig child node to a parent component

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

          jcr:primaryType="cq:EditConfig"

          cq:actions="[EDITANNOTATE]"/>

For more info you can read https://blogs.perficient.com/2019/02/19/how-to-prevent-authors-from-deleting-a-child-component/

You can create a component with all the container configurations and use supertype for other parent components. so can manage this configuration in one place.