Style System is not visible for Embedded Components - AEM 6.3

[kavithas2205162]

Style system is not visible in component's toolbar for components which are embedded into another component (Component A) using data-sly-resource.  The parent component (Component A) is added as a default component at template level (Editable templates).

For the same embedded components style system is visible, if I drag-drop the parent component on the page.

Note : The issue exists in we-retail templates and in AEM 6.4 as well.

Can anyone help me on this ?

[smacdonald2008]

Have you observed this behaviour on a fresh instance of AEM?

[kavithas2205162]

Yes the issue is present in fresh instance of AEM 6.3+SP2 and AEM 6.4.  Observed in we-retail templates and pages.

[FrancescaBueti]

I also see this issue in 6.4. For embedded components, the style option will show up, yet when I go to choose a style, it will not persist. (It blinks briefly with the correct style, then the page refreshes) However, it does store the proper cq:styleIds information. Any idea how I can get the class to persist and make the style system work as expected for embedded components?

smacdonald2008​

[mickjleroy]

I'm running into the same issue. The issue is the component wrapper DIV isn't generated when a component is embedded and in normal situations, the wrapper DIV contains the Layout classes and Style system classes.

It would be possible to create a helper Sling Model that takes in the "currentStyle" for the component and gives you the Style system classes but it's a bit of a hassle.

smacdonald2008​ any help would be greatly appreciated.

[mickjleroy · Accepted solution]

As per the Decoration Tag documentation​:

This is why you're not seeing the Style system classes when embedding a component.

The behaviour of the wrapping DIV can be controlled via the HTL that embeds the component. To make sure the wrapping DIV (and corresponding layout & style classes) are added, you must specify the "decoration=true" option as follows:

<sly data-sly-resource="${'list'@ resourceType='weretail/components/content/list', decoration=true}"></sly>