Example of §4.2 doesn't comply with §4.8

[gabrielwalt]

The following example doesn't comply with §4.8 (Always use existing HTML elements for your block statements if possible).

<sly data-sly-use.teaser="com.example.TeaserComponent">
    <div class="teaser">
        <a class="teaser__link" href="${teaser.link}"></a>
    </div>
</sly>

Because as far as I understand the style guide, §4.8 would request it to be written as follows:

<div class="teaser" data-sly-use.teaser="com.example.TeaserComponent">
    <a class="teaser__link" href="${teaser.link}"></a>
</div>

Maybe a better example would be something like the following:

<!--/* Bad */-->
<p data-sly-use.foo="Foo">${foo.one}</p>
<p>${foo.two}</p>

<!--/* Good */-->
<sly data-sly-use.foo="Foo">
    <p>${foo.one}</p>
    <p>${foo.two}</p>
</sly>

[ErikGrijzen]

You're right! I updated the code example so it's not conflicting with 4.8 anymore.

Thanks for spotting that 👍