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
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Configuring Style System for Nested Components

FrancescaBueti
Level 2
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
smacdonald2008
Correct answer by
Level 10
Level 10

Team replied:

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

View solution in original post

6 Replies
smacdonald2008
Level 10
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.

koenve
Level 3
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).
smacdonald2008
Correct answer by
Level 10
Level 10

Team replied:

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

View solution in original post

FrancescaBueti
Level 2
Level 2

Okay thank you so much!

Can I document somewhere as a feature request?

mnecibi
Level 1
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>

 

koenve
Level 3
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).