add web component lifecycle

Author: Hamidalavi

Learn/31. Web Components.md

@@ -105,7 +105,13 @@ Then when use this tag in our html content:
 
 There is specific web component lifecycle which the browser follows, when instantiating our own custom element objects in the DOM.
 
-- The first thing that gets executed, is the `constructor()`. Because this always gets executed when an object gets created based on our class, and then the class's constructor gets executed. So this is essentially called when the element is created. It's created in memory first and it's not part of the DOM at the beginning.
+- The first thing that gets executed, is the `constructor()`. Because this always gets executed when an object gets created based on our class, and then the class's constructor gets executed. So this is essentially called when the element is created. It's created in memory first and it's not part of the DOM at the beginning. So the `constructor()` is great for some basic initializations, some basic values for the different properties and variables we might be using in our class, in our component, but it's the wrong place for accessing the DOM. Because our custom element has not been added to the DOM yet.
+
+- For this, there is another method we can add in our class which will be executed by the browser once this element (custom component) has been mounted onto the browser's DOM, and that is the `connectedCallback()` method. This is called when our element has been attached to the DOM; and therefore this is a place for DOM initializations. So where we can now start adding content or where we can start accessing the DOM.
+
+- There also is a `disconnectedCallback()` method which will also be executed automatically for us and this method will be called by the browser whenever our element (i.e. our custom web component) is detached from the DOM. This is a great method for some cleanup work; for example, if you were sending a HttpRequest, this would be where you could cancle it.
+
+- There is another method, the `attributeChangedCallback()` and that will be important for listening to changes to attributes to our own element. This is important for updating the data and the DOM of our web component when some attributes which can passed to our component changed.
 
 ## Working with `connectedCallback()`