Difference between <sly data-sly-test and <div data-sly-test for sightly conditional statements

Question

I am new to sightly. Can someone please help me understand the difference between using

<sly data-sly-test ="${condition}" data-sly-unwrap>

and

<div data-sly-test="${condition}" data-sly-unwrap>

I am using this in AEM html. Will there be any structural impact on using the div tag for the conditional statements?

Rabinowitz

Answer 1

The sly will unwrap itself when the expression in data-sly-test evaluates to true, the div will not unwrap automatically. If you use data-sly-unwrap the div tag will unwrap too. sly is just a shorthand.

For example:

<sly data-sly-test=“true”>foo</sly>
<div data-sly-test=“true”>bar</div>
<div data-sly-test=“true” data-sly-unwrap>baz</div>

will render:

foo
<div>bar</div>
baz

Longe

The false side of the data-sly-test cases can be understood from the HTL specification, specifically Removes the whole element from the markup. – Yawning

Yeah, I read this article and it says that if data-sly-test="false", the whole element will be removed from the DOM, but it's not happening when I tried. I'm still getting the <div> displayed like this: <div class="row" data-sly-test="false"> //some content </div> would you be able to tell why that's happening? – Alexandro