Page Comparison

As you may know, elementary components have an associated logic. This logic , which is a script where you can interact with the component. An additional thing you might want to do is to Additionally, you can 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 in the app where you will use your elementary

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

Code Block

language	js
title	<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()
 ...

Code Block

language	js
title	App

<head>
	...
	<script src="https://cubbles..world/..sandbox/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="https://cubbles..world/..sandbox/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 domDOM. 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 DOM2.4 | The Cubbles Tag API and the 2.4 | The Cubbles Javascript API.

Note

title	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.

Versions Compared

Old Version 1

New Version Current

Key