1
00:00:02,350 --> 00:00:09,620
So now that we had a detailed look at how we can create autonomous web components by extending HTML element,

2
00:00:09,640 --> 00:00:16,030
let me also show you that alternative way which I mentioned where you can create web components by basing

3
00:00:16,030 --> 00:00:22,540
them on specific built-in components or HTML elements I should say

4
00:00:22,540 --> 00:00:31,030
and for that, I will create a new component, I'll create it in a new Javascript file which I'll name

5
00:00:32,860 --> 00:00:36,470
confirm-link.js. Now in there,

6
00:00:36,470 --> 00:00:40,790
I will create a new class and I'll name this ConfirmLink as well

7
00:00:40,790 --> 00:00:47,430
and here I want to extend the HTML anchor tag element.

8
00:00:47,540 --> 00:00:54,870
Now the HTML anchor tag element belongs to the a HTML element,

9
00:00:54,990 --> 00:00:57,620
so to this a href here.

10
00:00:57,750 --> 00:01:03,960
Now here we could be forwarding the user to google.com, Google

11
00:01:04,310 --> 00:01:11,160
and obviously if we we reload this and we click this link, we are forwarded to that page.

12
00:01:11,390 --> 00:01:19,010
Now the idea is that we wrap this in our own web component or that we create a web component based on

13
00:01:19,010 --> 00:01:26,180
that anchor tag which still has all the functionalities of the built-in anchor tag, so which still takes

14
00:01:26,180 --> 00:01:35,300
the ref attribute and forwards us but which in addition asks us if we really want to go there before

15
00:01:35,450 --> 00:01:36,730
redirecting us

16
00:01:36,860 --> 00:01:41,870
and this is a use case you could certainly have on a web page where you want to have links leading to

17
00:01:41,900 --> 00:01:49,550
external resources, where you want to ask the user before really forwarding the user.

18
00:01:49,550 --> 00:01:57,260
Now for that here in ConfirmLink, I'll add the connected callback right away, don't need to constructor

19
00:01:57,820 --> 00:01:58,780
really right now,

20
00:01:58,790 --> 00:02:05,540
just want to have the callback and there I want to register a click listener on this element,

21
00:02:05,720 --> 00:02:14,120
so on the anchor tag which I am in the end extending here. We could set up a shadow DOM here and that is

22
00:02:14,120 --> 00:02:14,970
really important.

23
00:02:14,990 --> 00:02:21,800
I'm not doing it here because I don't need it but when extending a specific element, you can use all

24
00:02:21,800 --> 00:02:26,660
the same features we used here in the tooltip, so you can attach a shadow root,

25
00:02:26,720 --> 00:02:28,640
you can add your own template,

26
00:02:28,730 --> 00:02:31,970
you can do all these things here too. Here,

27
00:02:31,970 --> 00:02:38,450
I just happen to not need anything of that, I want to keep all the default look and behavior and all

28
00:02:38,450 --> 00:02:39,130
of that,

29
00:02:39,200 --> 00:02:45,200
I just want to add an extra click listener and I do that here in the connected callback by adding an

30
00:02:45,200 --> 00:02:52,790
event listener and by adding it directly to the this keyword, I add it to my custom element which extends

31
00:02:52,790 --> 00:02:57,080
this built-in element and I add my click listener here

32
00:02:57,080 --> 00:03:02,650
and when this click happens, then I will execute a function

33
00:03:02,720 --> 00:03:07,620
and here I will use an ES6 arrow function which takes an argument,

34
00:03:07,770 --> 00:03:14,060
the default event object which will be created by the Javascript engine, by the browser so to say

35
00:03:14,510 --> 00:03:18,460
and then here I have that function body which gets executed.

36
00:03:18,530 --> 00:03:23,390
Now we could also assign some method of this class which we create here

37
00:03:23,480 --> 00:03:25,390
but here I want to keep it really simple,

38
00:03:25,430 --> 00:03:28,960
I just have this function which gets executed upon a click

39
00:03:29,150 --> 00:03:38,600
and what I want to do here is, I want to check if confirm, confirm is a method or a function built into

40
00:03:38,600 --> 00:03:45,180
Javascript, it's a globally available function where I ask, do you really want to leave?

41
00:03:45,410 --> 00:03:54,230
And if this is yes, then confirm or if the user clicks yes, then this will return true. If this is not

42
00:03:54,230 --> 00:03:56,290
the case and hence I add exclamation mark,

43
00:03:56,300 --> 00:04:02,760
so if the user clicks cancel or doesn't confirm this, then I want to stop the default behavior,

44
00:04:02,780 --> 00:04:10,430
I don't want to forward the user and therefore on the incoming event object, I can call prevent default

45
00:04:10,790 --> 00:04:17,510
to suppress the default behavior which would be to basically redirect the user to the target of

46
00:04:17,510 --> 00:04:24,600
the link which would be the default behavior of an anchor tag. Now with that created, we just need to

47
00:04:24,600 --> 00:04:25,510
define it,

48
00:04:25,610 --> 00:04:32,040
so again we'll use custom elements and there the define method and just as before, we now choose our own

49
00:04:32,190 --> 00:04:36,490
selector, our own tag for that element

50
00:04:36,690 --> 00:04:44,610
and just as for the tooltip, we still should use a name which has a dash in it and which also has some

51
00:04:44,610 --> 00:04:46,290
unique prefix.

52
00:04:46,290 --> 00:04:50,850
So here, I'll again use uc and then confirmlink

53
00:04:50,850 --> 00:04:59,130
for example. The second argument then is our ConfirmLink class here which extends the HTML anchor

54
00:04:59,130 --> 00:04:59,640
element,

55
00:04:59,640 --> 00:05:08,340
so just as before but now since we don't extend HTML element but this specific HTML element, the

56
00:05:08,340 --> 00:05:15,060
anchor element and that would be the case no matter if we extend the anchor or a paragraph or an image

57
00:05:15,060 --> 00:05:22,890
or whatever this, whenever we extend a specific element and not the generic HTML element,

58
00:05:22,980 --> 00:05:28,080
so whenever we have such a specific element, we need to pass a third argument here which is an object,

59
00:05:28,860 --> 00:05:36,890
where I set extends to the tag of the element we extend, in this case it's an anchor element,

60
00:05:36,890 --> 00:05:39,620
so we have to use the a tag here.

61
00:05:39,620 --> 00:05:48,990
So our custom element extends the built-in anchor tag, the a element and now with that, we can go to the

62
00:05:49,020 --> 00:05:53,600
index.html file and in there, I first of all want to import this,

63
00:05:53,600 --> 00:06:01,050
so I will copy that import and add an import to confirm-link.js and now at the bottom here, instead

64
00:06:01,110 --> 00:06:05,050
of my anchor tag like this, I want to use my custom element.

65
00:06:05,250 --> 00:06:12,240
Now when extending a built-in element, you don't use your custom element as you did before by placing

66
00:06:12,240 --> 00:06:13,970
your own tag here,

67
00:06:13,980 --> 00:06:22,440
instead you keep the original tag, so the anchor tag, the a tag but you add a new attribute, the is attribute

68
00:06:23,100 --> 00:06:27,700
and the value of that attribute now is your custom selector here.

69
00:06:27,750 --> 00:06:34,340
So that is how you use web component or a custom element based on a built-in element, like the anchor

70
00:06:34,350 --> 00:06:35,030
in this case.

71
00:06:35,550 --> 00:06:40,140
So now I say is, the uc-confirm-link on the anchor tag

72
00:06:40,350 --> 00:06:46,710
and with that if I now save this and I reload that, when I click this link, I get asked if I really want

73
00:06:46,710 --> 00:06:54,390
to leave. If I click cancel, then I stay here because if I click cancel, we basically execute this code

74
00:06:54,420 --> 00:06:55,770
and we prevent the default,

75
00:06:55,980 --> 00:07:02,360
hence the navigation is cancelled. If I click okay instead,

76
00:07:02,360 --> 00:07:06,560
then we proceed as before and that is pretty cool.

77
00:07:06,560 --> 00:07:14,610
This is a cool example for how you could extend a built-in element, keep all its style and all its functionality,

78
00:07:14,720 --> 00:07:20,000
though as I mentioned you could replace for example the look by adding your own shadow DOM and your

79
00:07:20,000 --> 00:07:21,010
own template

80
00:07:21,140 --> 00:07:28,190
but here I'm just adding a little bit of functionality to all of a sudden have a brand new element based

81
00:07:28,460 --> 00:07:30,830
on that original built-in element.