> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/faq/custom-elements-with-polyfill.md).
# My custom header element is not rendering when using a polyfill (IE)
World's #1 PDF SDK Library for Web, Mobile, Server, Desktop
If you have noticed that your custom header element using JSX is not rendering in IE when you have a polyfill, then there may be a conflict between that polyfill and React. This could happen if the polyfill defines a `Symbol` construct in the main window where you are also running React. This is more common for Internet Explorer (IE) as it does not have a default, native `Symbol` construct defined unlike the other browsers (Chrome, Firefox, even Edge (pre-Chromium)).
React will mark JSX elements with a type using a `Symbol` if available or a number. The React API `React.isValidElement` will check this type to ensure it is a React component. WebViewer UI uses `React.isValidElement` to ensure JSX from custom elements are valid prior to rendering. The problem arises when the implementation of `Symbol` in the main window is different from the implmentation of `Symbol` in the iframe WebViewer is running in. WebViewer has already polyfilled `Symbol` with a polyfill using native code in the iframe. When the UI is mounted, React in the iframe is already aware of that `Symbol` type. However, returning JSX with a polyfill on the main window may create a React element tagged with a different `Symbol` implementation. When compared via `isValidElement` by the UI in the iframe, the comparison will fail and the component will not be rendered.
There is a solution to this. If you define a placeholder `Symbol` when it is not defined, most polyfills will not define it again and overwrite it as it could be native. React will automatically know to use numbers for types as `Symbol` is invalid. Upon being rendered by the UI in the iframe, the number is used for comparison instead. Thus, allowing your components to render properly.
{% tabs %}
{% tab title="HTML" %}
{% code lineNumbers="true" %}
```html
```
{% endcode %}
{% endtab %}
{% endtabs %}
## What if I need to use Symbol in the main window?
If you need to use symbol in the main window, you can pull it out from the iframe and attach it to the window when WebViewer loads.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer(...)
.then(function(instance) {
var iframeWindow = instance.iframeWindow;
window.Symbol = iframeWindow.Symbol;
// Other code
var test = Symbol('mySymbol');
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
---
# 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/get-started/faq/custom-elements-with-polyfill.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.