Configuring Style System for Nested Components | Community
Skip to main content
FrancescaBueti
FrancescaBueti
April 3, 2019
Solved

Configuring Style System for Nested Components

  • April 3, 2019
  • 5 replies
  • 7156 views

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:

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:

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by smacdonald2008

    Team replied:

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

    5 replies

    smacdonald2008
    smacdonald2008
    April 3, 2019

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

    koenve
    koenve
    January 21, 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).
      smacdonald2008
      smacdonald2008Accepted solution
      April 3, 2019

      Team replied:

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

        FrancescaBueti
        FrancescaBuetiAuthor
        April 3, 2019

        Okay thank you so much!

        Can I document somewhere as a feature request?

        mnecibi
        mnecibi
        January 16, 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>

         

          U
          user02597
          April 21, 2022

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

            koenve
            koenve
            April 22, 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).

              J
              JackJinAccenture
              February 10, 2022

              This comment should probably be the "Accepted Solution"

              Terms & ConditionsAccessibility statement

              Loading footer...