1
00:00:02,140 --> 00:00:02,380
Okay

2
00:00:02,410 --> 00:00:06,430
so we created our first web component and it is working

3
00:00:06,550 --> 00:00:11,040
but obviously this component is not doing anything useful here,

4
00:00:11,050 --> 00:00:13,580
well it's time to now change that.

5
00:00:13,690 --> 00:00:22,060
The core idea behind our own web components, behind our custom elements is in the end that we attach

6
00:00:22,210 --> 00:00:30,730
other existing HTML elements, like divs and buttons and paragraphs, to build more powerful widgets

7
00:00:30,790 --> 00:00:33,370
composed of these different elements

8
00:00:33,430 --> 00:00:42,040
and by the way the already built-in video element which is a normal HTML tag is kind of like

9
00:00:42,040 --> 00:00:42,760
a web component

10
00:00:42,760 --> 00:00:44,270
we could build on our own.

11
00:00:44,320 --> 00:00:45,970
It's one HTML tag

12
00:00:45,970 --> 00:00:51,670
but behind the scenes, if we had a video being loaded here, you would see that it is made up of a couple

13
00:00:51,670 --> 00:00:57,850
of buttons like the play button and so on and that is just what we want to build here on our own.

14
00:00:57,850 --> 00:01:04,300
So since we want to render a tooltip there, what would make sense is that we for example have a paragraph

15
00:01:04,630 --> 00:01:11,530
with some text or let's actually say in the end we want to use that tooltip inside of a paragraph we

16
00:01:11,530 --> 00:01:15,530
might have, like web components are awesome,

17
00:01:15,550 --> 00:01:24,520
this could be our text and our tooltip here should maybe be spanning that web components word here, so

18
00:01:24,520 --> 00:01:30,820
that later when we hover over web components or over some icon which should be inserted next to it, that

19
00:01:30,820 --> 00:01:37,630
we then automatically see a tooltip with some text we also defined. Now we're not there yet but we can

20
00:01:37,630 --> 00:01:38,290
get there and

21
00:01:38,350 --> 00:01:47,560
let's start by actually adding a button or an icon after the text we passed here so that we can actually

22
00:01:47,560 --> 00:01:49,560
see that. For that,

23
00:01:49,560 --> 00:01:56,100
I'll go back to the tooltip and instead of logging something to the console, here we can instead use

24
00:01:56,130 --> 00:02:02,800
the this keyword which is built into Javascript to access the web component object,

25
00:02:02,800 --> 00:02:09,210
so the HTML element object which will be created for us when the browser detects this tag being

26
00:02:09,210 --> 00:02:10,260
used

27
00:02:10,260 --> 00:02:16,590
and here we can use all the features we can use on normal HTML elements

28
00:02:16,620 --> 00:02:24,090
when we select them in Javascript too, for example we can append a child node, so we can append another

29
00:02:24,150 --> 00:02:28,180
HTML element inside of our custom element

30
00:02:28,410 --> 00:02:36,330
and that sounds promising because there, I actually want to append my own icon let's say, my own icon

31
00:02:36,420 --> 00:02:38,630
above which we later can hover

32
00:02:39,090 --> 00:02:47,760
and for that, I can simply call document create element here and I will create a span here, a span element

33
00:02:47,820 --> 00:02:54,060
and that of course is not a custom web component, it is an element built into the browser because in

34
00:02:54,060 --> 00:03:03,510
the end, all your components you're building will be made up of these core primitives, of these built-in

35
00:03:03,690 --> 00:03:10,500
elements, you just compose them differently, style them differently and add your own event listeners, your

36
00:03:10,500 --> 00:03:14,610
own logic to do something when a certain button gets clicked and so on.

37
00:03:14,610 --> 00:03:20,670
So all this composition, all this logic will in the end make up your own element.

38
00:03:20,670 --> 00:03:27,650
So here I'm creating a span and I will store that in a new constant,

39
00:03:27,660 --> 00:03:30,510
so basically a variable which I'll never change,

40
00:03:30,510 --> 00:03:36,900
this is also a built-in Javascript feature using next gen Javascript syntax which Chrome, the latest version

41
00:03:36,900 --> 00:03:45,900
of it, natively supports and I'll name this constant tooltipIcon, the name is up to you and on that tooltipIcon,

42
00:03:45,960 --> 00:03:57,330
I'll then set the text content equal to a whitespace, so a blank here and then parentheses and

43
00:03:57,350 --> 00:04:00,070
let's say a question mark inside of it

44
00:04:00,260 --> 00:04:04,970
and you could theoretically also create an image, an element and render your own image,

45
00:04:05,060 --> 00:04:07,160
here I'll just go with text.

46
00:04:07,160 --> 00:04:08,690
I want to add this,

47
00:04:08,720 --> 00:04:15,800
this span here with this text content, I want to add this now in my HTML element and therefore here,

48
00:04:16,100 --> 00:04:21,540
I will call append child and I will append my tooltipIcon

49
00:04:21,620 --> 00:04:32,370
here. With that if I now save that and I reload this page in the browser, I actually get an error

50
00:04:32,370 --> 00:04:33,430
here.

51
00:04:33,450 --> 00:04:37,650
Now this is a bit of a cryptic error message, in the end

52
00:04:37,650 --> 00:04:46,140
the problem we have here is the place where we try to append a child, the constructor is the wrong place

53
00:04:46,140 --> 00:04:46,990
for it.

54
00:04:47,160 --> 00:04:55,590
Now to find the right place, we need to learn how the browser or Javascript, the Javascript engine, actually

55
00:04:55,590 --> 00:05:01,910
goes about creating our own custom elements because it follows a specific lifecycle for that.