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

2
votes

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?

1
aemsightly

1 Answers

12
votes

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