Configuring Style System for Nested Components | Community
Skip to main content
FrancescaBueti
FrancescaBueti
Level 2
Apr 3, 2019 5:52 PM UTC
Solved

Configuring Style System for Nested Components

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.
    smacdonald2008
    smacdonald2008Accepted solution
    Level 10
    Apr 3, 2019 6:37 PM UTC

    Team replied:

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

    View reply

    8 replies

    koenve
    koenve
    Level 2
    Apr 22, 2020 10:30 AM UTC

    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).

    Translate
      JackJinAccenture
      New Participant
      Feb 10, 2022 3:42 PM UTC

      This comment should probably be the "Accepted Solution"

      Translate
      mnecibi
      mnecibi
      New Participant
      Jan 16, 2020 1:52 PM UTC

      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>

       

      Translate
        user02597
        New Participant
        Apr 21, 2022 1:23 PM UTC

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

        Translate
          FrancescaBueti
          FrancescaBuetiAuthor
          Level 2
          Apr 3, 2019 6:54 PM UTC

          Okay thank you so much!

          Can I document somewhere as a feature request?

          Translate
          smacdonald2008
          smacdonald2008Accepted solution
          Level 10
          Apr 3, 2019 6:37 PM UTC

          Team replied:

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

          Translate
            smacdonald2008
            smacdonald2008
            Level 10
            Apr 3, 2019 6:08 PM UTC

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

            Translate
            koenve
            koenve
            Level 2
            Jan 21, 2020 2:24 PM UTC
            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).
            Translate
              Terms & ConditionsAccessibility statement

              Loading footer...