1
00:00:02,270 --> 00:00:10,220
So I mentioned that there is a specific web component lifecycle which the browser follows when instantiating

2
00:00:10,310 --> 00:00:13,970
our own custom element objects in the DOM

3
00:00:13,970 --> 00:00:22,340
so to say. The first thing that gets executed is the constructor because this always gets executed when

4
00:00:22,340 --> 00:00:25,650
an object gets created based on your class and

5
00:00:25,700 --> 00:00:28,370
then the class's constructor gets executed,

6
00:00:28,430 --> 00:00:31,900
so this is essentially called when the element is created.

7
00:00:31,910 --> 00:00:40,910
Now it's important to highlight here that the moment where the element is created is not the moment where

8
00:00:40,910 --> 00:00:45,820
the element is then also attached into the real DOM by the browser,

9
00:00:45,950 --> 00:00:51,660
instead it's created in memory first and it's not part of the DOM at the beginning.

10
00:00:51,710 --> 00:00:59,360
So the constructor is great for some basic initializations, some basic values for the different properties

11
00:00:59,360 --> 00:01:06,800
and variables you might be using in your class, in your component but it's the wrong place for accessing

12
00:01:06,800 --> 00:01:12,880
the DOM because your custom element has not been added to the DOM yet.

13
00:01:13,160 --> 00:01:21,010
For this, there is another method you can add in your class which will be executed by the browser

14
00:01:21,080 --> 00:01:28,600
once this element, once this custom component has been mounted onto the browser's DOM and that is

15
00:01:28,600 --> 00:01:35,910
the connected callback method. This is called when your element has been attached to the DOM and therefore

16
00:01:35,930 --> 00:01:39,220
this is the place for DOM initializations,

17
00:01:39,420 --> 00:01:46,860
so where you can now start adding content or where you can start accessing the DOM.

18
00:01:46,860 --> 00:01:52,930
There also is a disconnected callback method which will also be executed automatically for you

19
00:01:53,100 --> 00:01:57,650
and this method will be called by the browser whenever your element,

20
00:01:57,660 --> 00:02:02,870
so your custom element, your web component, whenever that is detached from the DOM,

21
00:02:03,270 --> 00:02:09,630
so when you destroy that node which you can do through Javascript for example and therefore this is then

22
00:02:09,620 --> 00:02:15,630
a great method for some cleanup work, like for example if you were sending a HttpRequest, this would

23
00:02:15,630 --> 00:02:17,860
be where you could cancel it.

24
00:02:17,970 --> 00:02:25,410
There is another method, the attribute changed callback and that will be important for listening to changes

25
00:02:25,410 --> 00:02:27,880
to attributes to your own element.

26
00:02:27,990 --> 00:02:33,030
It is something we haven't covered yet and therefore I will come back to this, this will later become

27
00:02:33,030 --> 00:02:40,920
important for updating the data and the DOM of your web component when some attributes which can be passed

28
00:02:40,920 --> 00:02:42,490
to your component changed

29
00:02:42,570 --> 00:02:45,300
but we haven't covered attributes on your own elements yet,

30
00:02:45,510 --> 00:02:48,630
so let's ignore that and let's focus on the connected callback.