1 00:00:02,370 --> 00:00:09,280 So what are web components? Web components really are just your own custom 2 00:00:09,300 --> 00:00:17,160 HTML elements, HTML elements that are not built into the browser but that are created by you as 3 00:00:17,160 --> 00:00:22,100 a developer or by some other developer and you are now using them in your project 4 00:00:22,410 --> 00:00:27,860 and what could be easier to dive into them than to just use such a custom web component, 5 00:00:27,910 --> 00:00:30,210 so let's have a quick look. Here 6 00:00:30,240 --> 00:00:34,660 I have a simple index.html file and I opened it in Visual Studio Code, 7 00:00:34,680 --> 00:00:39,960 the IDE I'm using in this course, you can do this in your normal system text editor, that really does 8 00:00:39,960 --> 00:00:40,770 not matter, 9 00:00:40,830 --> 00:00:43,730 it's a normal HTML5 skeleton we have here, 10 00:00:43,770 --> 00:00:47,520 you'll find this exact file attached to this video in case you want to start with that too 11 00:00:47,610 --> 00:00:50,120 but there is nothing special about this file. 12 00:00:50,430 --> 00:00:57,170 Now in that file, let's say we're creating an application where we want to show a modal so that info 13 00:00:57,170 --> 00:01:01,550 box pop over overlay thing you see on many pages. 14 00:01:01,680 --> 00:01:04,050 Now obviously, we can create one from scratch, 15 00:01:04,050 --> 00:01:09,660 we can add a div here, add some styling to the div and then write some Javascript to conditionally show 16 00:01:09,660 --> 00:01:14,280 and hide that div and also add another div that can act as a backdrop, 17 00:01:14,280 --> 00:01:20,370 so this gray area behind the modal that blocks access to the rest of the page, we can write all of that 18 00:01:21,090 --> 00:01:28,050 but we can also create our own web component for that or use a web component someone else created 19 00:01:28,050 --> 00:01:30,270 and here I created one for you 20 00:01:30,270 --> 00:01:32,760 and you also find that attached to this video. 21 00:01:32,760 --> 00:01:37,920 There you will find this modal.js file which you can just download and drag and drop into the same 22 00:01:37,920 --> 00:01:42,470 folder as the HTML file you created or you downloaded. 23 00:01:42,570 --> 00:01:45,060 Now you can go through this file, in the end, 24 00:01:45,060 --> 00:01:52,440 here we create or I created a so-called web component, a custom HTML element and we will do this together 25 00:01:52,440 --> 00:01:53,340 in this course, 26 00:01:53,340 --> 00:01:58,050 this is taken directly from the course, we will build this component later in the course. 27 00:01:58,500 --> 00:02:00,180 So I won't go through that right now, 28 00:02:00,180 --> 00:02:02,300 there is a lot of stuff in there we don't know yet 29 00:02:02,420 --> 00:02:04,770 and this video is not about understanding all of that, 30 00:02:04,800 --> 00:02:11,280 this video is about seeing what custom elements do or what such custom web components do. 31 00:02:11,340 --> 00:02:16,860 This web component in the modal here is in the end registered as a custom element with the uc-modal 32 00:02:16,860 --> 00:02:17,340 tag, 33 00:02:17,340 --> 00:02:19,560 that is what I can tell you right now about this code. 34 00:02:19,590 --> 00:02:26,180 This creates a new HTML tag that we can use in any file that imports this modal.js file, 35 00:02:26,280 --> 00:02:27,840 so let's do that. 36 00:02:27,840 --> 00:02:33,720 Let's add a script import, here in the head section so that it gets loaded early and let's point at 37 00:02:33,720 --> 00:02:37,190 that modal.js file and for that, it needs to be in the same folder 38 00:02:37,290 --> 00:02:44,430 as I just mentioned. Now with that imported, we can use the uc-modal element as if it were a normal 39 00:02:44,460 --> 00:02:45,700 HTML element 40 00:02:45,840 --> 00:02:52,440 and of course this is not a built-in element, normally using this tag would do absolutely nothing because 41 00:02:52,440 --> 00:02:54,400 the browser doesn't recognize that 42 00:02:54,960 --> 00:03:00,770 but it now does as my Javascript file, it registers a custom element under this tag. 43 00:03:00,780 --> 00:03:06,120 Now this modal happens to work in a way where we need to pass in some information between the opening 44 00:03:06,120 --> 00:03:07,380 and closing tag, 45 00:03:07,470 --> 00:03:14,970 for example a h1 tag, the modal title where we set the title of the modal and there we use a feature 46 00:03:14,970 --> 00:03:20,760 called slots which you'll learn in detail throughout the course which tells that web component where to 47 00:03:20,760 --> 00:03:23,930 position that content inside of the component. 48 00:03:23,940 --> 00:03:29,480 So here I can say slot equals title because this is one of the reserved slots I have in this component 49 00:03:30,120 --> 00:03:35,160 and now we also need some content that is shown below the title and there I'll add a paragraph, 50 00:03:35,160 --> 00:03:47,630 this is our first web component. With this added, if we now double click this index.html file, you 51 00:03:47,630 --> 00:03:51,940 will not see anything because the modal isn't opened right now. 52 00:03:52,040 --> 00:04:00,040 You can open it by adding a special attribute to this uc-modal tag and that's all logic we added or 53 00:04:00,050 --> 00:04:04,070 we will add in this modal.js file, so that is why this will work, 54 00:04:04,070 --> 00:04:05,990 you can add the opened attribute, 55 00:04:05,990 --> 00:04:09,190 make sure to spell it right. After you did this, 56 00:04:09,200 --> 00:04:10,010 if you reload, 57 00:04:10,010 --> 00:04:15,350 hey here is a modal and you can even close that by clicking one of the buttons or clicking the backdrop 58 00:04:15,490 --> 00:04:17,590 and you see we have a nice animation there too 59 00:04:17,810 --> 00:04:21,220 and this again is all stuff we will build throughout this course. 60 00:04:21,260 --> 00:04:24,860 Now of course, we can also open this programmatically if we wanted to. 61 00:04:24,860 --> 00:04:31,190 So instead of hardcoding opened in there, we could add other scripts, so another Javascript code which is 62 00:04:31,190 --> 00:04:36,260 not related to the web component which could be our normal application code for this web app we're creating 63 00:04:36,890 --> 00:04:43,550 and there the cool thing is we can interact with our own custom elements, just as with native HTML 64 00:04:43,700 --> 00:04:44,640 elements. 65 00:04:44,660 --> 00:04:50,090 So here I'm getting access to my modal and I'll store that in a constant named modal, by the way I 66 00:04:50,090 --> 00:04:55,070 will have a Javascript refresher where I explain what const is in case you don't know that 67 00:04:55,280 --> 00:05:00,620 and now I can use the normal DOM operations like document query selector to get access to an element 68 00:05:00,620 --> 00:05:02,130 with a CSS selector 69 00:05:02,200 --> 00:05:09,350 and here I will use uc-modal, my own tag as a selector. And with that, let's say we add a timeout here 70 00:05:09,710 --> 00:05:16,160 and after three seconds, I want to open the modal. For that, I'll add an anonymous function here, an arrow 71 00:05:16,160 --> 00:05:21,900 function in this case and there I can access my modal and call an open method and this open method also 72 00:05:21,900 --> 00:05:27,260 exists because I added the logic for this method in this web component and we will do this together 73 00:05:27,380 --> 00:05:29,030 later in the course. 74 00:05:29,030 --> 00:05:35,690 So now with that, if we reload, there is nothing there but after three seconds, you will see that modal 75 00:05:35,720 --> 00:05:39,000 opening and you can still close it with the buttons and so on. 76 00:05:39,020 --> 00:05:45,470 So this is how a web component works and what a web component is, it is your own HTML element 77 00:05:45,560 --> 00:05:49,100 which you can configure in the way you want. Behind the scenes, 78 00:05:49,160 --> 00:05:55,670 such a web component also just uses native elements like divs or a header as you can see and we will 79 00:05:55,670 --> 00:06:01,460 learn all of that step-by-step in the course but we can group that together, add additional logic like 80 00:06:01,460 --> 00:06:01,700 here 81 00:06:01,700 --> 00:06:08,420 the open method, the opened attribute and so on, add special styling and add for example an animation and 82 00:06:08,420 --> 00:06:16,910 hide that all under an HTML tag that we can dump into any project which imports this web component. 83 00:06:16,910 --> 00:06:21,070 That is what web components are in a nutshell and that is what makes them awesome 84 00:06:21,230 --> 00:06:27,200 but now let's have a closer look at what makes up the web components specification and why we might 85 00:06:27,200 --> 00:06:27,950 want to use them.