Initialize the component in the order of DOM element

[manasabojja7]

Hi Team,

I ran into an issue where I have about multiple custom components, which apply background color based on the parent container style.

Let's say I have 3 components: BasicCard, CustomCard, DetailCard

I have a global function that checks for background color and applies the corresponding background color to these components.

The scenario I have is:

Scenario 1: CustomCard is placed inside BasicCard(this is inside a parent container that has a specific bg)

Scenario 2: CustomCard is placed inside DetailCard(this is inside a parent container that has a specific bg)

The function to apply Bg is added to the init method of each component and AEM is initializing components in an alphabetical order which is causing it to initialize the components in this order: BasicCard, CustomCard, DetailCard

The problem is in scenario 2, Ideally, the bg color of CustomCard should be driven based on the bg color of DetailCard, but since the function to apply bg is called first for CustomCard(it is driving the logic before it got executed for DetailCard)

DOM:

<parentcontainer bgcolor="x">

   <detailcard bgcolor="y">

       <customcard bgcolor="z">

       </customcard>

   </detailcard>

</parentcontainer>

I would like to have the logic to apply the bg triggered from each component in the order of the DOM structure. I tried to move the logic from the init to the window.onload but still I see the issue.

Any help is appreciated.

[mahi1729]

Sorry but I don't get a clear understanding of how these components are being rendered. Are you using custom web elements? However for your usecase I may use style system and define the css that is based of parent container rather than handling in Java script. However if you are using the background color picker on container component this option may not be so useful but similar idea can be executed. 

Here is a sample block for your less file where parent container background color determines child component colors. And parent container will have different styles configured so author can choose from the paintbrush icon when authoring the page or container. I hope this will give you an idea of avoiding Javascript to achieve this functionality. 

.parent-container-gray

{

background-color : gray

detail-card

{

 background-color:white

} 

}

parent-container-black

{

background-color : black

detail-card

{

 background-color:gray

} 

}