Sightly rendering problem - ul inside a data-sly-list, included via data-sly-resource, generated unwanted markup elements.
I am seeing some unexpected markup generated from 2 sightly files.
The Sightly file that includes data-sly-resource and the included Sightly file render ok, until a <ul> element is appears in the included resource markup. After that, repeated unwanted <a> markup elements are generated that include nothing but whitespace.
The approach is as follows, authors store the path to a number of pages to be included dynamically. The contents of a parsys on each is the target of the data-sly-resource, e.g. /content/help/page1/jcr:content/par.html.
A snippet of the 'parent' Sightly file is as follows:
<!-- /* help points to my wcm use backing file */ -->
<div class="help-category-panel"> <ul class="help-category-list" data-sly-list.category="${help.pages}"> <li class="help-category-item"> <a class="help-category-link" ="${['#', category.escapedId] @ join = ''}"> <div data-sly-resource="${category['target']}" data-sly-unwrap></div> </a> </li> </ul> </div>A snippet of the 'child' Sightly file is as follows:
<!-- /* helpCategory points to my wcm use backing file */ --> <span class="${['help-category-icon', helpCategory.iconClass] @ join = ' '}"></span> <p class="help-category-name">${helpCategory.label}</p> <div class="help-article-snippets" id="${helpCategory.escapedId}"> <!-- including this ul results in unexpected markup --> <ul class="help-article-snippet-list" data-sly-list.article="${helpCategory.articles}"> <li class="help-article-snippet-item"> <a href="#" class="help-article-snippet-link"> <h4 class="help-article-snippet-title">${article['snippetTitle']}</h4> <p class="help-article-snippet-text"> ${article['snippetSummary']} </p> </a> </li> </ul> </div>A snippet of the generated markup follows; I get an unwanted <a> element - only containing whitespace - before the <a> I actually want (inside the <div class="help-category"> added by Sightly).
<li class="help-category-item"> <a class="help-category-link " href="#_content_help_page1"> </a><div class="help-category"><a class="help-category-link " href="#_content_help_page1"> <span class="help-category-icon icon-first"></span> <p class="help-category-name">Help Category 1</p> </a><div class="help-article-snippets is-hidden" id="_content_help_page1"><a class="help-category-link " href="#_content_help_page1">