5

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?

Reporter
  • 3,897
  • 5
  • 33
  • 47
Anjali Shyamsundar
  • 527
  • 1
  • 5
  • 14

1 Answers1

16

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
Vlad
  • 10,602
  • 2
  • 36
  • 38
  • The `false` side of the `data-sly-test` cases can be understood from the [HTL specification](https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#225-test), specifically `Removes the whole element from the markup`. – pzrq May 22 '23 at 02:08