2.3 | How to create a component instance dynamically?

To create and then add a component instance dynamically you should take 2 things into account:

You should add the dependency of the desired component to the rootDependencies
Create the component using the document API method createElement()
Append the component to the Cubbles container (by default the body otherwise the element having the cubx-core-crc attribute)

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

<head>
	...
	<script src="../../cubx.core.rte@2.2.3/webcomponents-lite/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@1.2",
	                  "artifactId": "cubx-textarea"
              		}
           		]
	        }
    	  }
	</script>
	<script src="../../cubx.core.rte@2.2.3/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. Then, you should checkt the /wiki/spaces/RTE/pages/22156188 and the /wiki/spaces/RTE/pages/22156475. Please note that if want to initialize the component you should do it before it is appended to the DOM.

Use document.createElement

Although you may want to append the component using the innerHTML property of a container, we recommend you to use the document.createElement() method, so that everything works properly.