``` `data-sly-use` also loads HTL **template libraries** from other files, which pairs with `data-sly-call` (below): ```html ``` ## data-sly-test Renders the element only when the expression is truthy. Falsy values include `false`, `0`, empty strings, `null` and empty collections. ```html

${hero.subtitle}

``` You can store the result in a variable by adding an identifier, which is handy for avoiding repeated work and for writing an "else" branch (HTL has no `else` keyword): ```html

Nothing to display.

``` ## data-sly-set Assigns a value to a variable, which you can then reuse in the template. It was added in HTL 1.4, so make sure your AEM version supports it (AEM as a Cloud Service does). ```html

Hello, ${fullName}!

``` ## data-sly-text Replaces the element's content with the evaluated expression. The placeholder text inside the element is ignored at render time, which is useful for prototyping markup. ```html

Lorem ipsum placeholder

``` For simple cases, plain `

${properties.jcr:description}

` is cleaner and equivalent. ## data-sly-attribute Sets attributes on the element. Use the dotted form for one attribute: ```html Read more ``` Or pass a **map** to set several attributes at once: ```html

``` Behavior worth remembering: - A value of `false`, `null` or an empty string **removes** the attribute - A value of `true` outputs a **boolean attribute** (for example, `checked`) ```html ``` ## data-sly-element Changes the element's tag name dynamically. A classic use is a heading whose level is chosen by the author: ```html

${model.title}

``` For security, HTL only allows a safe list of element names here, and anything else is ignored. ## data-sly-list Iterates over a collection, repeating the element's **content** while the host element appears once. Inside the loop you get the item and an `itemList` helper object. ```html

${item.title}

``` Use a custom identifier to rename the variables (the helper is named after it): ```html

${link.label}

``` The `itemList` object exposes: | Property | Meaning | | --- | --- | | `index` | Zero-based position | | `count` | One-based position | | `first` / `last` | True for the first / last item | | `middle` | True for items that are neither first nor last | | `odd` / `even` | True when the zero-based `index` is odd / even | You can also limit iteration with `begin`, `end` and `step` options: ```html

${item.title}

``` ## data-sly-repeat Works like `data-sly-list`, except it repeats the **host element itself**. This avoids wrapper elements and extra `` tags, and it is generally the preferred choice. ```html

${card.title}

${card.description}

``` This outputs one `

` per item. With `data-sly-list` you would need an extra wrapper. ## data-sly-resource Renders **another resource** using that resource's own component and script. Use it to include child components, such as the items inside a container: ```html

``` Combined with a loop, it renders each child with its own component: ```html

``` Useful options include `resourceType`, `selectors`, `addSelectors`, `removeSelectors`, `prependPath`, `appendPath` and `wcmmode`. ## data-sly-include Includes the output of **another script** in the *current* resource's context. Unlike `data-sly-resource`, it does not switch to a different resource or component. ```html ``` Rule of thumb: use `data-sly-resource` to render *content*, and `data-sly-include` to reuse *markup fragments* of the same component. ## data-sly-template and data-sly-call Templates are reusable markup blocks with parameters. Define one with `data-sly-template`: ```html ``` Call it (in the same file) with `data-sly-call`: ```html ``` Or load it from another file with `data-sly-use` and call it through the identifier: ```html ``` A template is never rendered on its own. It only produces output when called. ## data-sly-unwrap Removes the host element from the output while keeping its content. This is useful when you need an element only to carry other block statements. ```html

Only the span is output

``` It also accepts a condition (HTL 1.4+): ```html

...

``` In practice, the `` element (below) is usually cleaner than unwrapping. ## The `` Element `` is a special element that is **removed from the output** while its block statements still run. Use it when no real element could carry the statement: ```html

Configure this component

``` Write it as `` rather than the self-closing ``, since `sly` is not a void element. ## Evaluation Order When Statements Share an Element When several block statements sit on one element, HTL evaluates them in a fixed priority order, not the order you wrote them: 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` Statements at the same level run left to right. This explains why `data-sly-test` combined with `data-sly-repeat` on the same element works as expected: the test runs first, and the loop only starts if it passes. ```html

${item.title}

``` ## Expression Options Worth Knowing Options follow `@` inside an expression and are not block statements, but you'll use them constantly: | Option | Example | Effect | | --- | --- | --- | | `context` | `${text @ context='html'}` | Sets the output escaping context (explained next) | | `i18n` | `${'Read more' @ i18n}` | Looks up a translation | | `format` | `${'Page {0} of {1}' @ format=[current, total]}` | String formatting | | `join` | `${tags @ join=', '}` | Joins a collection into a string | You can combine several options, separated by commas: `${'Read more' @ i18n, context='text'}`. ## Display Contexts in Depth HTL's biggest security feature is that it **escapes output automatically**, based on *where* in the markup the expression appears. This protects you from XSS without any extra effort. The rule of thumb: **let HTL pick the context, and override it only when you must.** ### What HTL Applies Automatically | Where the expression sits | Context applied | | --- | --- | | Element content (`

${x}

`) | `text` | | Attribute value (`

`) | `attribute` | | `href` / `src` and similar URL attributes | `uri` | | Inside a ` ``` Without the explicit contexts, both values would render as empty. Alternatively, put the data in a `data-` attribute and read it from your client library, which avoids inline scripts entirely: ```html

``` ### Using `unsafe` `context='unsafe'` turns escaping **off**. Only use it for content you fully control (for example, markup generated by your own trusted code), and never for author-entered or user-supplied values. If you find yourself reaching for it, try `html` first. ### Context Checklist - Rich text from the RTE → `context='html'` - A URL built in code → `context='uri'` - Data inside inline `

${model.title}

${card.title}

${title}