# Interacting with Elementary Cubbles from the inside
You can control the behavior (logic) and view of an elementary component (remember that compound components have no associated logic). When you are developing elementary components you will certainly need to control its behavior; e.g., by setting a slot value, or performing some action after a slot value changes.
## The simplified cubx-textarea sample case
For this tutorial, we will assume that we are developing our `cubx-textarea` component, we will explore how to interact with the elementary from the view, the logic and the manifest (See [Create an Elementary Component](https://cubbles.atlassian.net/wiki/spaces/CDT/pages/6422716/Create+an+Elementary+Component)). For the purpose of this tutorial we will assume that the `cubx-textarea` only have one input/output slot called *value* as illustrated below.
### The view of our simplified cubx-textarea
Our simplified `cubx-textarea` will contain a normal textarea HTML element, which will be manipulated from the logic layer. The view of our elementary looks as follows:
```markup
// Include the logic of our elementary
```
## The logic of an elementary
### The CubxComponent object
The CubxComponent object provides the global `CubxComponent()` function to register a new Cubble component. It provides the *model* property to control the state of an elementary component. You should extend this object to code the logic of an elementary.
When programming the logic of an elementary component you will need to access and edit slots' values. You can also use the [public methods](/docs/runtime-extension-rte/user-guide/cubbles-js-api/outside-interaction.md#methods-for-outside-interaction) used to interact from the outside, i.e., *get\[SlotId]\()*, *set\[SlotId]\(value)*, *slots ()* and *repropagate\[SlotId] ()*. In that case, the component is referenced using *this* since you are inside the component, e.g. use `this.getValue()` in our `cubx-textarea` elementary to access the value of the *value* slot. Besides those methods, you can implement the ones described below:
| Method name convention | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| created () | Called when the local DOM of an elementary has been created |
| ready () | Called when the local DOM of an elementary has been initialized |
| connected () | Called when the HTML element of an elementary has been attached to the DOM |
| disconnected () | Called when the HTML element of an elementary has been detached to the DOM |
| contextReady () | Called when the Cubbles framework is ready to work; that is, when all dependencies are included, all components and all connections are created and the initialization is done. |
| model\[SlotId]Changed () | Called when the value of a slot has changed after calling the *set\[SlotId]\(value)* method. It is useful when you need to perform additional logic after a slot has changed. |
### Accessing the local DOM of an elementary
You can access the local DOM of an elementary using the standard Javascript selection methods (*this.querySelector(selectors)* and *this.querySelectorAll(selectors)*). Additionally, you can use the *this.$$(selectors)* shortcut for *this.querySelector(selectors)*. For instance, the code below will return the textarea element contained in our 'cubx-textarea' elementary:
```javascript
var textarea = this.$$('textarea');
```
## Adding logic to the cubx-textarea component
To make our `cubx-textarea` to work properly when the textarea value changes, we will we need extend the logic of our component with:
1. A listener to the *change* event of the component (e.g. in the *contextReady* method).
2. A method to update the textarea html when the *value* slot changes.
That extension can be done extending the *CubxComponent* object. In our case, we will do it in a javascript file (cubx-textarea.js), which was included in the view above.
```javascript
(function () {
'use strict';
CubxComponent({
is: 'cubx-textarea',
// 1. 'change' event listener
contextReady: function() {
this.$$('textarea').addEventListener("change", function () {
this.setValue(event.target.value);
}.bind(this), false);
},
// 2. update textarea element when the 'value' slot changes
updateValue: function (newValue) {
if (newValue !== undefined) {
this.$$('textarea').value = newValue;
}
},
});
}());
```
### A working example
We will use two instances of the `cubx-textarea` elementary. In this example, we use the [The Cubbles Tag API](/docs/runtime-extension-rte/user-guide/cubbles-tag-api.md) to initialize the *value* slot of one the instances of the component and create a connection between both instances.
#### Code
```markup
<cubx-textarea>
"Value of textarea 1"
```
#### Result
Check [this demo](https://cubbles.world/sandbox/my-first-webpackage@0.1.0-SNAPSHOT/cubbles-js-api-demos/elementary-interaction-demo.html) to see the result working online. *Note that this demo uses the complete version of the cubx-textarea*
## Interaction via initialization
Input slots can be initialized in manifest, so you can pre-defined an initial interaction by default. For elementary components, the slot definition object has a property called *value*. This value will be set to the slot during component initialization; thus, when *cubxReady()* is called, the slot will have that value.
### A working example
We will initialize the value of the slots of our `cubx-textarea` component. The slots definition should look similar to the one below, note that the initialization occurs due to the *value* property:
```javascript
...
"slots": [
{
"slotId": "value",
"type": "string",
"direction": [
"input",
"output"
],
"value": "The value of my textarea",
}
]
...
```
> Note that these initial values will not be propagated since this initialization is only valid for input slots.
This time, we should just use the component to see the result of defining init values for the slots:
#### Code
```markup
<cubx-textarea>
```
#### Result
---
# 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/runtime-extension-rte/user-guide/cubbles-js-api/inside-interaction.md?ask=
```
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.