> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/templates-and-components/.use.md).

# .use()

`.use()` renders a template with data and optional slots.

***

#### Syntax

```js
template.use(data);
template.use(data, slots);
template.use(data, transform);
```

***

#### Parameters

* `data` → object used for `{{placeholders}}`
* `slots` → object, string, or DOM node for slot content
* `transform` → function that can customize the rendered element

***

#### Output

```js
HTMLElement
```

***

#### Basic Example

```js
const card = $('#user-card').use({
  name: 'Ada Lovelace',
  avatar: '/images/ada.png'
});

$('#users').append(card);
```

***

#### Slots Example

```js
const card = $('#user-card').use({
  name: 'Grace Hopper',
  avatar: '/images/grace.png'
}, {
  default: '<p>Computer scientist.</p>',
  actions: '<button>View profile</button>'
});
```

***

#### Custom Element Example

After loading a template, you can use its id as an HTML tag.

```html
<user-card name="Margaret Hamilton" avatar="/images/margaret.png"></user-card>
```

***

#### Key Takeaway

> `.use()` turns a template into real HTML.