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.createElementmethod - 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
rootDependenciesin 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 | ||||
|---|---|---|---|---|
| ||||
...
// 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 | ||||
|---|---|---|---|---|
| ||||
<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 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 DOM.
| Note | ||
|---|---|---|
| ||
Although you may want to append the component using the |