1
00:00:02,410 --> 00:00:09,370
Now with the lifecycle methods on your elements explained, it should be clear why append child causes

2
00:00:09,370 --> 00:00:15,940
an error here. In the constructor, the element has been created but it has not been added to the DOM yet

3
00:00:16,370 --> 00:00:24,030
and therefore trying to append a child which tries to append it to the real DOM will fail,

4
00:00:24,040 --> 00:00:30,880
instead you should add the connected callback method here and make sure you spell this right because the

5
00:00:30,880 --> 00:00:35,450
browser will look for exactly that method, spelled exactly like that,

6
00:00:35,590 --> 00:00:41,830
it is case sensitive so make sure you have a capital C in there but a lowercase c at the beginning

7
00:00:42,340 --> 00:00:46,160
and now we can grab all that code here

8
00:00:46,270 --> 00:00:49,630
where we want to append a child or where we create a child,

9
00:00:49,630 --> 00:00:54,990
we can move that into the connected callback. Now with that, no other changes,

10
00:00:54,990 --> 00:00:58,630
if I now save that and I then reload this page,

11
00:00:58,630 --> 00:01:05,200
now you see we get no error and we see our question mark being rendered here at the beginning.

12
00:01:05,230 --> 00:01:12,940
Now obviously, it's added in front of our web components text and not after it and that is not the place

13
00:01:12,940 --> 00:01:14,250
where we want to have it,

14
00:01:14,350 --> 00:01:21,220
I'll come back to how it ends up there later but at least we can see we can now render something without

15
00:01:21,280 --> 00:01:27,090
errors and the key takeaway, which already shows a little bit of the use

16
00:01:27,130 --> 00:01:36,010
custom components give us, is that this question mark is not part of our HTML markup here but it's

17
00:01:36,010 --> 00:01:43,660
really something that is controlled by our web component and again, we'll add more usefulness to that

18
00:01:43,840 --> 00:01:46,660
and more features over the next lectures

19
00:01:46,660 --> 00:01:53,430
but this is now a crucial first step and it's also important to understand that we are using the connected

20
00:01:53,440 --> 00:02:00,790
callback here because we are accessing the DOM and our element has only been mounted onto the real DOM

21
00:02:00,790 --> 00:02:02,950
when this method gets called.