# How to create a component instance dynamically?

To create, and then, add a component instance dynamically you should:

1. Add the dependency of the desired component to the `rootDependencies`
2. Create the component using the document API method `createElement()`
3. Append the component to the Cubbles container (by default the  `body`,  otherwise the element having the  `cubx-core-crc`  attribute)

The code below presents this process for adding a new `cubx-textarea` to an existing app:

```markup
<head>
    ...
    <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/webcomponents/custom-elements-es5-adapter.js"></script>
    <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/webcomponents/webcomponents-lite.js"></script>
    <script>
          // 1. You should add the dependency of the desired component to the rootDependencies
          window.cubx = {
            "CRCInit": {
            "rootDependencies": [
                   {
                      "webpackageId": "com.incowia.basic-html-components@2.0.0",
                      "artifactId": "cubx-textarea"
                    }
                ]
            }
          }
    </script>
    <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/crc-loader/js/main.js" data-crcinit-loadcif="true"></script>
</head>


<body>
    ...
    <script>
        // 2. Create the component using the document API method createElement()
        var cubxTextArea = document.createElement('cubx-textarea');


        // 3. Append the component to the Cubbles container
        document.body.appendChild(cubxTextArea);
    </script>
</body>
```

You may also be interested in defining inits and connections for the component before appending it to the DOM. Check the [The Cubbles Tag API](https://cubbles.gitbook.io/docs/vuepress-migration/runtime-extension-rte/user-guide/cubbles-tag-api) and the [The Cubbles Javascript API](https://cubbles.gitbook.io/docs/vuepress-migration/runtime-extension-rte/user-guide/cubbles-js-api) to get more information about it.

> **Use document.createElement**: Although you may want to append the component using the `innerHTML` property of a container, you should use the `document.createElement()` method for everything to work properly.


---

# Agent Instructions: 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:

```
GET https://cubbles.gitbook.io/docs/vuepress-migration/runtime-extension-rte/user-guide/faqs/dynamic-component-instance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
