Configuring Style System for Nested Components

Avatar

Avatar

FrancescaBueti

Avatar

FrancescaBueti

FrancescaBueti

03-04-2019

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

03-04-2019

Team replied:

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

Answers (4)

Answers (4)

Avatar

Avatar

koenve

Avatar

koenve

koenve

22-04-2020

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

Avatar

mnecibi

Avatar

mnecibi

mnecibi

16-01-2020

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

Avatar

FrancescaBueti

Avatar

FrancescaBueti

FrancescaBueti

03-04-2019

Okay thank you so much!

Can I document somewhere as a feature request?

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

03-04-2019

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