1 00:00:02,320 --> 00:00:08,760 So with all the base setup out of the way, let's now finally create our first web component, 2 00:00:08,830 --> 00:00:11,470 our first custom element 3 00:00:11,470 --> 00:00:19,870 and for that, in the tooltip.js file, I will create a new class and classes allow us to build blueprints 4 00:00:19,990 --> 00:00:22,160 for Javascript objects 5 00:00:22,300 --> 00:00:28,820 and it's such a blueprint that we will in the end wire up with our own custom HTML tag. 6 00:00:28,960 --> 00:00:32,800 Now you can give that class any name you want and I'll name it tooltip 7 00:00:33,370 --> 00:00:38,470 and now here's one important part, to be usable as a custom element, 8 00:00:38,470 --> 00:00:42,160 you need to extend something with extends keyword, 9 00:00:42,160 --> 00:00:48,240 which means you have to build your class based on some other base class 10 00:00:48,280 --> 00:00:51,790 and here we will use a base class that's built into the browser, 11 00:00:51,880 --> 00:00:56,260 we'll use the HTML element class here. 12 00:00:56,290 --> 00:01:01,620 Now this is a class, an object built into the browser, not defined by us 13 00:01:01,870 --> 00:01:06,140 and we extend that and every custom element has to extend that. 14 00:01:06,280 --> 00:01:13,270 It's still an independent and autonomous custom element though, I will show you extended built-in elements 15 00:01:13,270 --> 00:01:14,370 later, 16 00:01:14,650 --> 00:01:20,410 there you will not extend the HTML element but more specific versions of it. 17 00:01:20,410 --> 00:01:28,120 If you extend this, you have a basic vanilla green field HTML element you build on your own which does 18 00:01:28,120 --> 00:01:30,520 not depend on any built-in element, 19 00:01:30,520 --> 00:01:37,660 This is simply a base element you always need to extend and now in here, you will put all the logic that 20 00:01:37,660 --> 00:01:40,450 makes up your custom element. 21 00:01:40,450 --> 00:01:43,080 The question just is, what does this mean, 22 00:01:43,090 --> 00:01:52,580 put all the logic in there? Well let's say this tooltip component should in the end show us a tooltip 23 00:01:52,620 --> 00:01:56,740 button, a tooltip icon and when we hover over that icon, 24 00:01:56,810 --> 00:02:04,130 we want to present a tooltip to the user and for this, we can define a couple of things in this custom 25 00:02:04,130 --> 00:02:05,770 element to make this work 26 00:02:06,320 --> 00:02:14,000 and the first thing we can add is a constructor. A constructor is also a default method name which is detected 27 00:02:14,000 --> 00:02:19,400 by Javascript and Javascript will automatically execute this method, 28 00:02:19,400 --> 00:02:28,490 so this function inside of a class, whenever this class is instantiated, which means whenever a new object 29 00:02:28,490 --> 00:02:37,980 based on that class is created and later these new objects will be our own custom HTML tags in the 30 00:02:38,060 --> 00:02:39,170 index.html file. 31 00:02:39,200 --> 00:02:40,280 We haven't added them yet, 32 00:02:40,310 --> 00:02:41,810 we'll do so later. 33 00:02:42,170 --> 00:02:46,970 For now let's start simple and let's simply add a console log statement here, 34 00:02:47,300 --> 00:02:54,560 it is working and this should theoretically be output in the console whenever a new tooltip class is 35 00:02:54,560 --> 00:02:57,300 created or a new object. 36 00:02:57,320 --> 00:02:59,560 Now this is just a Javascript class, 37 00:02:59,600 --> 00:03:07,730 HOw can we now create our own HTML tag? For that we use another object that is built into Javascript and 38 00:03:07,730 --> 00:03:10,460 that's the custom elements object. 39 00:03:10,460 --> 00:03:16,640 This is an object which allows us to register our own custom elements and we do this by using the define 40 00:03:17,000 --> 00:03:18,160 method here, 41 00:03:18,170 --> 00:03:25,610 so this is a function on this object which you can execute, all built into Javascript. This define method 42 00:03:25,880 --> 00:03:35,110 takes at least two arguments - the first one is a string and there, you define your own HTML tag. 43 00:03:35,180 --> 00:03:38,120 Now there are some rules for that tag name, 44 00:03:38,120 --> 00:03:46,640 for example it has to be a single word which has to consist of at least two parts separated by a dash, 45 00:03:46,760 --> 00:03:55,930 so my-tooltip is a valid name, just tooltip alone is not. The reason for that rule is that all built-in 46 00:03:55,940 --> 00:04:02,770 HTML elements, like button or p or h1's are single words 47 00:04:02,960 --> 00:04:11,740 and by forcing you to have double words so to say, you are forced to not accidentally override one of 48 00:04:11,740 --> 00:04:13,300 the built-in elements, 49 00:04:13,300 --> 00:04:19,780 also possibly future added elements, So therefore you have to have a dash in that name and it has to 50 00:04:19,780 --> 00:04:25,780 be a dash, an underscore is not allowed for example, so it has to be a dash and therefore here we could 51 00:04:25,780 --> 00:04:27,620 have my-tooltip. 52 00:04:27,880 --> 00:04:33,100 Now the prefix here at the beginning is totally up to you, it can be my-tooltip, 53 00:04:33,100 --> 00:04:40,840 it could be tooltip-tooltip but in reality, you want to choose a prefix here which kind of guarantees 54 00:04:40,870 --> 00:04:49,090 that your web component, your custom element has a unique tag, so that if the users using your custom 55 00:04:49,090 --> 00:04:54,820 elements in their app because maybe you share them with the web, so that users using your custom elements 56 00:04:55,240 --> 00:05:02,430 have a very low chance of having clashing custom elements from different libraries. 57 00:05:02,600 --> 00:05:09,490 Therefore actually my-tooltip is not that great, often you use your company name there or a shortcut 58 00:05:09,580 --> 00:05:15,580 for your company name, like acad for academind in my case, in your case it should be your company or 59 00:05:15,580 --> 00:05:23,290 your initials, like ms for Maximillian Schwarzmuller in my case. So I will go with uc for Udemy 60 00:05:23,290 --> 00:05:30,280 course but in the end, choose a prefix here which, combined with the part after it, kind of guarantees 61 00:05:30,430 --> 00:05:32,920 that this is a unique name. 62 00:05:32,920 --> 00:05:38,740 So this is the HTML tag chosen now, by the way you can also have multiple dashes in multiple parts, 63 00:05:38,890 --> 00:05:41,860 at least one dash needs to be included, 64 00:05:41,920 --> 00:05:49,090 the second argument you pass to define then is your Javascript class that holds the logic for this custom 65 00:05:49,090 --> 00:05:49,840 element, 66 00:05:49,840 --> 00:05:52,430 so in our case this is the tooltip class here. 67 00:05:52,480 --> 00:05:54,890 So this class we defined up here, 68 00:05:54,970 --> 00:06:02,980 we pass this as a second argument and with that we're telling Javascript, hey whenever you detect this 69 00:06:02,990 --> 00:06:11,320 HTML tag in an HTML file, you want to instantiate this class, you want to create a new object based 70 00:06:11,320 --> 00:06:19,100 on that class and you want to use that object for all the logic behind that custom element and now with 71 00:06:19,100 --> 00:06:27,530 that and this tooltip.js file being imported here, we can actually add the uc-tooltip element here 72 00:06:28,010 --> 00:06:35,120 in the body of our index.html file and it will not do much, it should print this though. 73 00:06:35,120 --> 00:06:37,400 So now let's save both files, 74 00:06:37,400 --> 00:06:39,470 make sure you don't forget that 75 00:06:39,470 --> 00:06:46,190 and then let me simply run this by double clicking the index.html file. 76 00:06:46,200 --> 00:06:50,390 Now we'll not see anything on the page because we haven't added any visuals 77 00:06:50,610 --> 00:06:57,440 but if you open your developer tools under view, developer, developer tools or with the shortcut you 78 00:06:57,450 --> 00:06:59,040 find there, 79 00:06:59,040 --> 00:07:00,270 then you should be able 80 00:07:03,290 --> 00:07:07,370 to open the console part there and you can ignore the error 81 00:07:07,400 --> 00:07:08,410 you'll be getting, 82 00:07:08,570 --> 00:07:11,120 you should see it is working though. 83 00:07:11,240 --> 00:07:20,240 This shows, this proves that this code here runs and it can only run when an object is created based 84 00:07:20,240 --> 00:07:21,360 on this class, 85 00:07:21,380 --> 00:07:27,650 we never do that but we define our own element and therefore this element has to be responsible for 86 00:07:27,650 --> 00:07:29,150 this code running 87 00:07:29,150 --> 00:07:32,740 and indeed it is. Now to get rid of this error, 88 00:07:32,750 --> 00:07:38,150 there is one rule we have to follow when creating our own elements and adding a constructor, 89 00:07:38,150 --> 00:07:42,510 you always have to call super first in there. 90 00:07:42,530 --> 00:07:48,140 This is a built-in method you can call inside of a class which will execute the constructor of the base 91 00:07:48,140 --> 00:07:51,380 class you're extending and this is required. 92 00:07:51,380 --> 00:07:59,090 So if you add super here and you then reload this page, you will not see this error again, clear your 93 00:07:59,090 --> 00:08:03,940 console before reloading to make sure that you clear all past errors. 94 00:08:03,980 --> 00:08:06,320 So this is our first custom element added, 95 00:08:06,470 --> 00:08:12,830 obviously it's not doing anything useful but we have our own working HTML tag. 96 00:08:12,860 --> 00:08:15,520 Now we can start adding more logic to it.