> 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/web-components-4.x./api/more-features/deferred-attribute-resolving.md).

# Deferred attribute resolving

Defer bound attributes until FactFinder resolves their data.

## Documentation

### Avoid invalid requests caused by unresolved data bindings

Some attributes, such as image-related `src` and `srcset`, cannot use data binding directly. The browser fetches images immediately during HTML parsing.

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

The data binding has not yet been resolved. The resulting request uses an invalid source and causes an error.

Eventually, `src` resolves and the image displays correctly. The initial parsing error remains undesirable.

Use image binding to avoid this error. Image binding only works with the `src` attribute. It also only supports `ff-record`, `ff-suggest-item`, and `ff-asn-group-element`.

### A more general solution

Deferred attribute resolving offers a more general solution. It also supports `ff-template`.

It works like image binding. You can choose any attribute to resolve later.

Supported elements:

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

### Setup

Place `data-ffw-defer` on the target `ff-` element. Its value is a comma-separated list of attributes to resolve indirectly.

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

Inside the element, add counterpart attributes with the relevant data binding:

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

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

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

### Fallback in case of attribute name collisions

If you already use the same attribute naming pattern, use the alias. It is functionally identical and adds `ffw-` to the name.

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

You can use the regular attribute and alias together. In that case, Web Components resolves only the alias.

```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/web-components-4.x./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.