> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/api/more-features/deferred-attribute-resolving.md).

# Deferred attribute resolving

Deferred attribute resolving prevents browsers from requesting unresolved bound values. It supports attributes such as \`src\` and \`srcset\` across supported components.

## Documentation

Some attributes, such as image-related `src` and `srcset`, cannot use data binding directly because the browser tries to immediately fetch images when it encounters them during HTML parsing.

At that point, the data binding has not yet been resolved, and the request to an invalid source results in an error.

```html
<ff-template>
    <!-- Causes an error while the browser is parsing HTML. -->
    <img src="{{imageURL}}">
</ff-template>
```

Eventually, `src` would be resolved and the image displayed correctly, but the initial error during HTML parsing is undesirable.

To avoid this error, [image binding](/webcomponents-overview/api/more-features/image-binding.md) should be used. However, a limitation of *image binding* is that it only works for the `src` attribute and only for the `ff-record`, `ff-suggest-item`, and `ff-asn-group-element` elements.

## A more general solution

**Deferred attribute resolving** offers a more general and flexible solution that also expands to the `ff-template` and `ff-asn-group-element` elements.

At its core, it works the same as *image binding*, but it allows you to specify *any* attribute to resolve in the deferred fashion.

This feature is available on the following elements:

* `ff-record`
* `ff-suggest-item`
* `ff-asn-group-element`
* `ff-template`

{% hint style="info" %}
Elements that use the native `<template>` tag to define their templates should not be affected by premature browser requests.

However, there might be **web crawlers** that ignore it and try to follow the link or image source nonetheless. This could result in unwanted entries in the crawler's index.

You might want to check what a crawler actually indexes and then decide whether you need deferred attribute resolving, or apply it always for simplicity.
{% endhint %}

## Setup

Place the `data-ffw-defer` attribute on the `ff-` element in which you want to use deferred attribute resolving.

The attribute takes a comma-separated list of all attributes you want to resolve indirectly.

```html
<ff-template data-ffw-defer="src,srcset">
    ...
</ff-template>
```

Inside the `ff-` element, place the counterpart attributes with the relevant data binding.

They follow this pattern:

```
data-defer-[target-attribute-name]="{{data-binding}}"
```

For the `src` and `srcset` attributes, this would look like:

```html
<ff-template data-ffw-defer="src,srcset">
    <picture>
        <source data-defer-srcset="{{thumbnail_S}}">
        <img data-defer-src="{{thumbnail_L}}">
    </picture>
</ff-template>
```

## Fallback in case of attribute name collisions

If you are already using attributes that follow the above naming pattern, an alias is available that is functionally identical. It only adds `ffw-` to its name.

```
data-ffw-defer-[target-attribute-name]="{{data-binding}}"
```

You can use the regular attribute and the alias at the same time. In this case, **only the alias** will be resolved by Web Components.

```html
<ff-template data-ffw-defer="src">
    <img data-defer-src="{{notResolved}}"
         data-ffw-defer-src="{{resolvedImageURL}}">
</ff-template>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/api/more-features/deferred-attribute-resolving.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.