1 00:00:02,240 --> 00:00:07,250 We added our shadow DOM and this changed things by a lot, 2 00:00:07,250 --> 00:00:11,420 it is the right way to go but we're now missing our text 3 00:00:11,420 --> 00:00:19,060 we had there initially and we'll now dive into a feature called templates to define our base HTML 4 00:00:19,070 --> 00:00:25,670 structure of this HTML element, of our custom element and to later also bring back that text we 5 00:00:25,670 --> 00:00:34,730 passed between the opening and closing tags of our custom element. Now for templates, we got two alternatives, 6 00:00:34,820 --> 00:00:42,500 the first alternative for adding a template to our custom element is to go into our HTML document 7 00:00:42,890 --> 00:00:46,850 and there, we can add a new element, the template element. 8 00:00:46,850 --> 00:00:53,570 This is a HTML element built into the browser, understood by the browser and the important thing here 9 00:00:53,960 --> 00:00:58,940 is that this element is not rendered automatically. Now 10 00:00:59,090 --> 00:01:10,990 here we can take our question mark and add it in there like this, we had it in the span so let's wrap it 11 00:01:11,020 --> 00:01:12,340 in a span here too, 12 00:01:15,240 --> 00:01:15,840 select that, 13 00:01:15,840 --> 00:01:21,160 now we have a template which in the end is just that span with the question mark inside of it. 14 00:01:21,180 --> 00:01:29,120 So this is now our template and now we want to use that template as a blueprint for the HTML 15 00:01:29,130 --> 00:01:32,460 content that makes up our custom element. 16 00:01:32,460 --> 00:01:39,780 So previously, we simply created that HTML content in the connected callback and we happen to 17 00:01:39,780 --> 00:01:42,940 have a very simple HTML template for our tooltip, 18 00:01:42,960 --> 00:01:48,600 we only have this span with the question mark being added but it's easy to imagine more complex custom 19 00:01:48,600 --> 00:01:53,370 elements like a video player which has a dozens of buttons and so on. 20 00:01:53,370 --> 00:01:57,170 Now to use that content of the template in our web component 21 00:01:57,180 --> 00:02:06,400 now, I'll first of all give this template an ID of tooltip template for example and now in the tooltip.js 22 00:02:06,400 --> 00:02:11,690 file in the constructor where we can access the normal DOM, 23 00:02:11,770 --> 00:02:13,630 just not the DOM of this tooltip 24 00:02:13,660 --> 00:02:16,270 but we don't need that there, there 25 00:02:16,420 --> 00:02:25,850 I will now get my template and I'll store it in a constant by using the document query selector, again accessing 26 00:02:25,850 --> 00:02:30,380 the normal page DOM, not the DOM of this custom component 27 00:02:30,800 --> 00:02:38,610 and there I will use the ID selector to select the tooltip template, so I'm using that ID which I 28 00:02:38,610 --> 00:02:47,910 just added to my template. Now I get access to this template and now I want to basically copy the code 29 00:02:47,940 --> 00:02:49,500 I set up in that template, 30 00:02:49,560 --> 00:02:54,680 so this span in this case here and use it as a template for my custom component 31 00:02:55,560 --> 00:03:02,040 and for that I will simply access my shadow root which is available because I attached the shadow 32 00:03:02,040 --> 00:03:07,360 DOM and there, I will call append child. 33 00:03:07,470 --> 00:03:12,930 I can do that here because I can already access the shadow DOM even before the element has been rendered 34 00:03:12,930 --> 00:03:19,400 to the real DOM because the shadow DOM remember is kind of abstracted away from the real DOM anyways 35 00:03:19,560 --> 00:03:27,110 so this is available in the constructor and now I will append a child here and the child is my template 36 00:03:27,680 --> 00:03:33,680 and there, we can access a content property to access basically the content inside of the template and 37 00:03:33,680 --> 00:03:37,090 on the content, we can call clone 38 00:03:37,160 --> 00:03:44,330 node and there you have to pass a boolean indicating whether you want to do a deep clone or a shallow 39 00:03:44,330 --> 00:03:49,360 clone, a deep clone means that you would clone any nested elements in there too, 40 00:03:49,460 --> 00:03:55,520 so if you had like a h1 tag inside of that span, you would clone that too if you set the argument to 41 00:03:55,520 --> 00:03:56,420 true, 42 00:03:56,420 --> 00:04:01,000 if you set it to false, you would only clone the top level of elements. 43 00:04:01,010 --> 00:04:10,440 Now I will perform a deep clone here by setting this to true and with that, if I now save that and we 44 00:04:10,440 --> 00:04:15,000 reload that page, we see double quotation marks here actually, 45 00:04:15,060 --> 00:04:20,490 the reason for that being that we still have our code in there to add another question mark, 46 00:04:20,730 --> 00:04:26,340 so we should remove that and in addition, I will just change this a little bit down there, 47 00:04:26,430 --> 00:04:33,690 here I will set my tooltip icon equal to this shadow root 48 00:04:33,720 --> 00:04:39,540 and now here I want to find that span by simply adding a query selector because we can query the shadow 49 00:04:39,540 --> 00:04:42,660 DOM just as we can query the normal DOM 50 00:04:42,660 --> 00:04:48,810 and I will find that span there and with that if I save that and we reload this page, we have one question 51 00:04:48,810 --> 00:04:49,470 mark only 52 00:04:49,800 --> 00:04:51,330 but I can still hover over that. 53 00:04:52,080 --> 00:04:56,460 So now we are using our template, our HTML template here. 54 00:04:56,460 --> 00:05:01,440 Now this is one way of doing it but of course this has a couple of drawbacks, now 55 00:05:01,470 --> 00:05:09,420 for example this web component now requires some content to be added to our HTML file where we in 56 00:05:09,420 --> 00:05:12,110 the end just want to use that web component 57 00:05:12,300 --> 00:05:15,320 and of course we're still losing that text here. 58 00:05:15,330 --> 00:05:20,380 Now we can fix that text even with this approach but I will also show you an alternative 59 00:05:20,450 --> 00:05:26,880 to this approach because it would be nice to have all the web component being composed in our Javascript 60 00:05:26,880 --> 00:05:34,650 file here so that we don't have to add a template to the HTML code and I will show you both this solution 61 00:05:34,830 --> 00:05:38,520 and a solution for our lost text here over the next lectures.