dynamic-components.md

@@ -40,5 +40,20 @@ const Field = {
       this.valueContainer.textContent = parsedValue;
     },
   },
+
+  turnRed() {
+    this.style.background = 'red';
+  },
 };
 ```
+so let's analyse this example a bit:
++ `base` defines what element `this` is going to be in the rest of the component. It can be either a string or a function
+    + if it is a string such as `'div'`, `'span'`, etc. the base element will be a basic HTMLElement such as a div, span, etc.
+    + if it is a function the function will be called with the elements properties and children as arguments. The caveat here is that you cannot use `this` in this function as the base element is obviously not available yet. Everything more complicated than creating the base element and maybe adding a couple of classes or attributes should be done in `init` instead.
++ `parse` and `validate` are the equivalent of class-variables. They are appended to the element before `init` is called.
++ `init` is the equivalent of a class-constructor. It is called after all methods and properties are appended to the element. This is the place to 
+    + create all the children of your main elements and store handles to those that you need to change later on
+    + add EventListeners
+    + generally initialize variables from values passed in through the props
++ `value` is a dynamic property. It has a getter and setter method and therefore defines how the element will dynamically change when you change its 'value'
++ `turnRed` is a class method.
\ No newline at end of file