Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Configuring Style System for Nested Components

Avatar

Level 2

Hello,

I have a component "Three Card Merchandising" that contains other components like "Merchandising Cards" like so:

<div class="cmp-threeCardMerchandising__cards">

     <div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-one' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>

     <div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-two' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>

     <div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-three' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>

</div>

and have configured it to be a container component with "cq:isContainer" like so:

1724616_pastedImage_1.png

I have added this component to the structure of a template and configured a policy for one of the cards within the component to contains styles.

The style is showing up as expected on a page of this template type:

1724617_pastedImage_3.png

However the class is not being applied to the HTML when I select the option.

Is it possible to configure styles for nested components? If so, what changes can I make in order to get the style to apply as expected?

Thank you,

Francesca

1 Accepted Solution

Avatar

Correct answer by
Level 10

Team replied:

Unfortunately, I don't believe nested components with the Style system are supported.

0 Replies

Avatar

Level 10

This is not documented nor is there any examples of this use case. I am checking with the team on this use case.

Avatar

Level 3
From what I've noticed, it looks like the wrapper div is not being generated when including a component. Because of this, the style system cannot add any classes to it. Adding @decoration=true to the data-sly-resource will include the wrapper div (which is important, because otherwise your cq:htmlTag might not be taken into account).

Avatar

Correct answer by
Level 10

Team replied:

Unfortunately, I don't believe nested components with the Style system are supported.

Avatar

Level 2

Okay thank you so much!

Can I document somewhere as a feature request?

Avatar

Level 1

This worked for me :

     <sly class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-one' @ resourceType='corp-home/components/content/merchandisingCard', decorationTagName='div', cssClassName='card-one'}"></sly>

 

Avatar

Level 1

Your comment should be the accepted solution, you saved my day. I owe to you. Thanks 🙂

Avatar

Level 3

From what I've noticed, it looks like the wrapper div is not being generated when including a component. Because of this, the style system cannot add any classes to it. Adding @decoration=true to the data-sly-resource will include the wrapper div (which is important, because otherwise your cq:htmlTag might not be taken into account).

Avatar

Level 1

This comment should probably be the "Accepted Solution"