using data-sly-element and data-sly-unwrap creates malfromed html

For proper syntax for HTL - please consult the HTL Spec here -- htl-spec/SPECIFICATION.md at master · adobe/htl-spec · GitHub

I can reproduce this with both sly or div tags, it generates malformed structure, probably because 'editor' also uses <span> tags internally -

<sly data-sly-unwrap="${true}" data-sly-element="${'span'}">

    TEST

    </sly>

<span    // missing closing brace

    TEST

    </span>

You should open a bug for this..

Hi,

If you want text without tag you can use below:

<span data-sly-unwrap="${true}">

    Text

    </span>

if you want Text within span, simply use like below:

<span> Text </span>

So if I refer to the:

Block Statements Priority

When used on the same element, the following priority list defines how block statements are evaluated:

1. data-sly-template
2. data-sly-set, data-sly-test, data-sly-use
3. data-sly-call
4. data-sly-text
5. data-sly-element, data-sly-include, data-sly-resource
6. data-sly-unwrap
7. data-sly-list, data-sly-repeat
8. data-sly-attribute

When two block statements have the same priority, their evaluation order is from left to right.

This would mean that when this is evaluated:

<thisdoesnotwork data-sly-unwrap="${true}" data-sly-element="${'div'}">TEST</thisdoesnotwork>

Then data-sly-element will convert this line into :

<div data-sly-unwrap="${true}" >TEST</div>

Then the unwarp should change it into

TEST

Desired outcome.

Obviously right now I had to do it the long way.

Also please note that the first line also has a wierd tab characted output when this happens, I am sure people would have noticed this as well, when they tested this.

{TAB}<span    // missing closing brace

{space}{space}{space}{space}TEST

{space}{space}</span>

https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#3-special-html-tags