Rendering of an Experience Fragment inside a Webpage?

[surenk]

Fundamentally Experience Fragments are consumable content which can be used "as-is" and "makes senses on its own".

Also detailed here Adobe Experience Manager Help | Understanding Content Fragments and Experience Fragments in AEM 

If an Experience Fragment lives within a site page, can it use it's own template/styles separate from what the main Page will be?

If an Experience Fragment need to have certain specific styles (like font size/color for title and text, image sizes on it) and if this Experience Fragment need to live on a page in AEM Sites, but if that Page is built using a different Template that as separate styles defined.. the Page/Template styles are over-writing the XF styles. We cannot see the specific styles applied to components in an XF but seeing that of the site.

The process we are doing that isn't working:

1. Build an Editable Template (say Template-1) using styles (say Styles-A)
2. Build a page (Page-1) using Template-1
3. Build an Editable Template (Template-2) using styles (Styles-B)
   1. Add allowed Components. And also apply specific styles using the AEM OOTb Styles UI options.
4. Build an Experience Fragment (XF-1) using Template (Template-2 - internally uses Styles-B)
   1. While authoring the content using the allowed components, the specific styes are not being applied.
5. On Page-1, drag an "Experience Fragment Component" and use XF-1 as the source
   1. XF shows up with Styles of the main page Styles-A instead of Styles-B

We have issues at 4.1 and 5.1.  How do we solve this?

[aanchal-sikka · Accepted solution]

@surenk Rather than creating a different Style-B for XF Template-2, you can create multiple XF styles in Style-A.

Configure the Styles in policy of XF and then apply on Template-1, as needed.