xfpage overlay does not render structure of root element
Expected Behaviour
Properties set on the root element of an Experience Fragment in the XF Template Structure are rendered when the XF is included in a page via the WCM Core Experience Fragment component.
Actual Behaviour
When a XF is included in a page via the WCM Core Experience Fragment component, structure elements are rendered correctly for all child resources of the root, but the root element is NOT rendered with its structure properties.
Reproduce Scenario (including but not limited to)
Template Content Node:
- Path: /conf/mysite/settings/wcm/templates/structure--website-header/structure/jcr:content
- Properties:
- sling:resourceType: mysite/components/xfpage (XF component type from archetype)
Template Root Node:
- Path: /conf/mysite/settings/wcm/templates/structure--website-header/structure/jcr:content/root
- Properties:
- id: id-from-structure
- sling:resourceType: mysite/components/container
Experience Fragment Content Node:
- Path: /content/experience-fragments/mysite/header/master/jcr:content
- Properties:
- cq:template: /conf/mysite/settings/wcm/templates/structure--website-header
Experience Fragment Root Node:
- Path: /content/experience-fragments/mysite/header/master/jcr:content/root
- Properties:
- id: this-should-be-ignored
- sling:resourceType: mysite/components/container
Page Rendering Node:
- Path: /content/mysite/test/jcr:content/root/container-bodywrapper/experiencefragment
- Properties:
- fragmentVariationPath: /content/experience-fragments/mysite/header/master
- sling:resourceType: mysite/components/experiencefragment (extends core/wcm/components/experiencefragment/v2/experiencefragment)
When the Page node is rendered, the root element HTML has id this-should-be-ignored from the Experience Fragment content node, when instead it should have id-from-structure from the XF template structure node.
Cause
This appears to be caused by https://github.com/adobe/aem-project-archetype/blob/develop/src/main/archetype/ui.apps/src/main/content/jcr_root/apps/appId/components/xfpage/content.html
Instead of rendering the templated root resource, the HTML file delegates to a new data-sly-resource pointed at the resource content path, thus losing the structure elements from the template.
FWIW I was able to resolve in my implementation by changing the contents of /apps/mysite/components/xfpage/content.html
from:
<sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ selectors=[]}" />
to:
<sly data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer"
data-sly-repeat.child="${templatedContainer.structureResources}"
data-sly-resource="${child @ decorationTagName='div', selectors=[]}"></sly>