2.3 | How to create nested component instances dynamically within elementary Cubbles components

As you may know elementary components have an associated logic, which is a script where you can interact with the component. An additional thing you might want to do is to add nested component instances within your elementary. To aim that you should:

Create the desired component tag using the document.createElement method
Append the component to the DOM using the Polymer API
Call Polymer.dom.flush() if you then need to interrogate to DOM (e.g. you need offsetHeight, getComptedStyle, etc.)
Add the dependency of the desired component to the rootDependencies in the app where you will use your elementary

These code below presents this process for adding a new cubx-textarea as nested component of a component called my-elementary:

<my-elementary> logic

 ...
 // 1. Create the desired component tag using the document.createElement method
 var elem = document.createElement('cubx-textarea');
 
 // 2. Append the component to the DOM using the Polymer API
 Polymer.dom(this.root).appendChild(elem);
 
 // 3. Call Polymer.dom.flush()  (if needed)
 Polymer.dom.flush()
 ...

App

<head>
	...
	<script src="../../cubx.core.rte@2.2.3/webcomponents-lite/webcomponents-lite.js"></script>
	<script>
		  // 4. 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>
	...

	<my-elementary cubx-webpackage-id="this"></my-elementary>
	
	...
</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.