Search code examples
aemsightly

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

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?

Solution

  • 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