> 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./faqs/questions-and-troubleshooting.md).

# Questions and troubleshooting

Resolve common Web Components integration issues and browser errors.

### General

<details>

<summary>Which version is the documentation referring to?</summary>

Latest.

</details>

<details>

<summary>Can I contribute to the future development of FactFinder Web Components?</summary>

Yes. Although the Web Components codebase is closed, you can discuss and propose issues, changes, and features at [GitHub issues](https://github.com/FACT-Finder-Web-Components/ff-web-components/issues).

We are grateful for any feedback. Do not hesitate to ask questions or share concerns.

</details>

<details>

<summary>Can I see upcoming breaking changes and proposals?</summary>

Yes, at [GitHub issues](https://github.com/FACT-Finder-Web-Components/ff-web-components/issues). All related issues are tagged accordingly.

You can propose your own ideas or functionality. With no objections, breaking changes apply in the specified version.

</details>

<details>

<summary>Which browsers do FactFinder Web Components support?</summary>

FactFinder Web Components uses the official Web Components polyfill. It supports Chrome, Firefox, Edge, Safari 9+, IE11+, Chrome Android, and Mobile Safari.

We test against the latest version of each browser.

</details>

<details>

<summary>How can I find out which data is available in a Web Component's HTML template?</summary>

Each FactFinder Web Component has a property containing the data it displays. Access it from the browser console.

```js
document.querySelector("ff-record-list").records
document.querySelector("ff-record").recordData
document.querySelector("ff-asn-group").group
document.querySelector("ff-breadcrumb-trail-item").breadCrumbIrailItem
```

Most browsers support `$0`, which references the selected element in DevTools' **Elements** tab.

```js
$0.pagingItem
```

See the **API** tab of each element for available properties.

</details>

<details>

<summary>I want to use FactFinder Web Components with Angular, but data binding conflicts with Angular's <code>{{ }}</code> binding. Can you fix it?</summary>

Add Angular's `ngNonBindable` attribute to the parent element. This prevents Angular from parsing double curly braces.

When both bindings must exist in the same element, use:

```html
<ff-record>
  {{Angular Binding}}
  <ng-container ngNonBindable>
    {{FF Binding}}
  </ng-container>
</ff-record>
```

The `<ng-container>` tag is not rendered in the DOM.

Alternatively, change the default FactFinder Web Components binding delimiters through `ff-communication`'s `mustache-delimiters` attribute. See the **Underlying Engine (Mustache)** section of the Template Engine documentation.

HTML bindings still require an additional pair of curly braces. Use `ngNonBindable` for these bindings:

```html
<ng-container ngNonBindable>
  {{{FF HTML Binding}}}
</ng-container>
```

Use triple curly braces regardless of your custom delimiters.

</details>

<details>

<summary>How can I embed FactFinder Web Components into React templates?</summary>

Ensure React does not resolve Web Components data bindings. Render the bindings as verbatim strings.

```jsx
return (
  <ff-template>
    <div>{'{{regular}}'}</div>
    <div>{'{{{html}}}'}</div>
  </ff-template>
);
```

</details>

<details>

<summary>SEO crawlers index unresolved <code>https://shop.com/{{data.binding}}</code> URLs, which result in a 404.</summary>

Use `data-*` attributes for images and redirects.

**For anchors:**

```html
<ff-record-list>
  <ff-record>
    <div>
      <a
        data-redirect="{{record.Deeplink}}"
        data-redirect-target="_blank"
        data-anchor="https://www.myshop.de{{record.Deeplink}}"
      >
        Shop
      </a>
    </div>
  </ff-record>
</ff-record-list>
```

{% hint style="info" %}
For successful tracking, use `data-redirect`. Without it, the browser may redirect before tracking succeeds.
{% endhint %}

**For images:**

```html
<img data-image="{{record.ImageName}}">
```

</details>

<details>

<summary>“Show more” in <code>ff-asn-group</code> is always visible.</summary>

The `data-container="showMore"` element is probably inside `data-container="detailedLinks"`. Place it outside that container.

```html
<div data-container="detailedLinks">
  <div data-content="detailedLinks">
    <!-- Always-visible items are added here. -->
  </div>
</div>
<div data-container="showMore">
  <!-- This container only renders when the response has hidden links. -->
  <span class="text">Show More</span>
</div>
```

</details>

<details>

<summary>Hit highlighting in <code>ff-suggest</code> or <code>ff-asn-group</code> displays as raw HTML. How do I make it render correctly?</summary>

This usually happens when a custom template uses double curly braces, `{{ }}`. They render text as-is.

Use triple curly braces, `{{{ }}}`, so the highlighting markup renders as HTML. See the `ff-suggest` documentation or the Template Engine documentation.

</details>

<details>

<summary>Our polyfills seem to clash with the Web Components polyfills.</summary>

Use a polyfill compatible with the Web Components polyfill.

A clash may produce errors involving `Symbol.iterator` or `Promise`. For supported features, see the [Web Components polyfill repository](https://github.com/webcomponents/polyfills).

If this does not resolve the issue, contact us for a custom solution.

</details>

### Errors

<details>

<summary>Access to XMLHttpRequest has been blocked by CORS policy.</summary>

To use the Web Components library, ask the [FactFinder Service Desk](mailto:service-desk@fact-finder.de) to enable it for your instance.

</details>

<details>

<summary>Why does <code>could not invoke subscriber function [undefined] for topic [records]</code> report an <code>insertAll</code> error?</summary>

Add the missing `defer` attribute to `bundle.js`, as shown here:

```html
<script defer src="../dist/bundle.js"></script>
```

</details>


---

# 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./faqs/questions-and-troubleshooting.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.