1 00:00:02,240 --> 00:00:08,720 So let's dive into the basics about web components then, how they generally work, how we create our own 2 00:00:08,720 --> 00:00:13,550 web components and for this, we will use vanilla Javascript. 3 00:00:13,550 --> 00:00:22,320 This means no third-party libraries, no other packages, just Javascript as it natively runs in the browser 4 00:00:22,370 --> 00:00:29,170 but first of all, let me come back to the question, what web components are? Obviously we already learned 5 00:00:29,180 --> 00:00:36,350 that web components are basically our own HTML tags, like my tooltip here, which is not a tag built 6 00:00:36,350 --> 00:00:43,700 into the web or were built into the browser and that these are basically HTML tags which we define in 7 00:00:43,760 --> 00:00:52,070 Javascript code and which we then can use on our page. So web components are really as we use them, custom 8 00:00:52,130 --> 00:01:01,520 HTML elements but they are made up of three, theoretically four, but three important parts. 9 00:01:01,520 --> 00:01:08,770 The first and the core part that makes up web components, the web components specification set is the 10 00:01:08,780 --> 00:01:15,890 custom HTML element specification and since we in the end built custom HTML elements, 11 00:01:15,920 --> 00:01:17,750 this is the core part, 12 00:01:17,810 --> 00:01:24,710 this is essentially a bunch of Javascript functionalities that allow us to define our own HTML tags 13 00:01:24,740 --> 00:01:26,450 and the logic behind them, 14 00:01:26,480 --> 00:01:29,180 so this is a crucial part. 15 00:01:29,270 --> 00:01:35,690 Now you might wonder, okay what else could be important if we are talking about creating our own custom 16 00:01:35,690 --> 00:01:37,430 HTML elements? 17 00:01:37,430 --> 00:01:45,950 Well there are two other pieces which are also very important and which are used in that Javascript 18 00:01:45,950 --> 00:01:55,850 logic we write behind our custom HTML element and the first additional set of functions or of features 19 00:01:55,910 --> 00:02:02,720 offered in Javascript that is important related to creating custom elements is the shadow DOM specification. 20 00:02:03,590 --> 00:02:11,660 The shadow DOM specification is all about giving us some features to create our own DOM tree, our own 21 00:02:12,050 --> 00:02:19,520 elements behind that elements you could say that are hidden away from the main DOM and I will come back 22 00:02:19,520 --> 00:02:25,370 to that in more detail later where this will become clearer, so which is in the end just allowing us 23 00:02:25,370 --> 00:02:32,720 to define our own HTML tags which are then grouped together behind our custom HTML tag 24 00:02:33,230 --> 00:02:41,060 and which are separated from our main, our normal DOM and this is especially helpful when we talk about 25 00:02:41,090 --> 00:02:49,580 CSS styling because the shadow DOM will allow us to define CSS styles that only affect our 26 00:02:49,580 --> 00:02:58,490 custom element and even if we style a h1 tag in our custom element, we would not affect other h1 tags 27 00:02:58,490 --> 00:03:03,910 on the page and this will become all clearer once we actually use it and dive deeper into it, 28 00:03:04,130 --> 00:03:09,470 so it's another crucial part when it comes to separating our logic from the rest of the page you could 29 00:03:09,470 --> 00:03:18,350 say. The third important specification is about templates and slots and this is also something we will 30 00:03:18,350 --> 00:03:26,210 use in great detail, which in the end allows us to define our own HTML structure which is hidden behind 31 00:03:26,240 --> 00:03:34,400 our custom element and which allows us to add some flexible entry points, these so-called slots, that 32 00:03:34,430 --> 00:03:40,820 we can then actually populate with information from outside when we use our custom element 33 00:03:40,820 --> 00:03:45,440 and again, this is something which will become clearer later. 34 00:03:45,440 --> 00:03:51,230 So I know that this is all very confusing right now because I'm throwing a lot of interesting words 35 00:03:51,230 --> 00:03:57,440 around, a lot of specifications without explaining in detail what they do because it makes more sense 36 00:03:57,440 --> 00:04:03,590 to gradually build up the knowledge and we will actually start with custom HTML elements before we 37 00:04:03,710 --> 00:04:09,320 add these other features, before we add the shadow DOM and the templates. 38 00:04:09,320 --> 00:04:16,580 Now I also mentioned that there are four specifications that make up the web components spec and the 39 00:04:16,580 --> 00:04:20,290 last specification is about HTML imports, 40 00:04:20,330 --> 00:04:28,220 the idea here was that we can actually import HTML files into HTML files, just as we can import CSS 41 00:04:28,250 --> 00:04:34,490 and script files but this is actually not a continued specification because as you will learn in this 42 00:04:34,490 --> 00:04:44,630 course, there is a more elegant way of importing your components and of importing the HTML inside of 43 00:04:44,630 --> 00:04:45,800 your components. 44 00:04:45,830 --> 00:04:52,040 So we will not need this and indeed, it's not continued, it's not added to all browsers and there are 45 00:04:52,040 --> 00:04:53,480 no plans to do so.