1
00:00:02,380 --> 00:00:08,560
Now that is all nice but we also had the thing that I wanted to get this template out of this DOM,

2
00:00:08,560 --> 00:00:10,480
now how does that work?

3
00:00:10,480 --> 00:00:18,070
First of all, let me say that having a template in our normal HTML file is of course fine, as you see, it

4
00:00:18,070 --> 00:00:19,420
works

5
00:00:19,420 --> 00:00:26,050
but if we want to create a fully reusable web component, it would be nice to define the template in the

6
00:00:26,050 --> 00:00:34,090
Javascript file too so that in the end, we just have to dump this Javascript file into any project, any

7
00:00:34,150 --> 00:00:39,670
web project and we can start using our own component

8
00:00:39,670 --> 00:00:45,520
and for this I'll go back to the tooltip.js file and I will define a template in there which is really

9
00:00:45,520 --> 00:00:54,130
easy. Instead of appending our template content, so I can get rid of these two files here, I will access

10
00:00:54,140 --> 00:00:55,440
my shadow root

11
00:00:55,580 --> 00:01:02,760
and there we can set the innerHTML code, innerHTML is a default property you can set on your

12
00:01:03,060 --> 00:01:10,280
HTML elements, on the built-in ones too and there you can write any HTML code you want.

13
00:01:10,290 --> 00:01:16,740
So now we can grab this content we had in the template and remove the template thereafter and add this

14
00:01:16,740 --> 00:01:25,100
here, like this. If you save that and you then reload this page, you have the same as before, the same behavior

15
00:01:25,100 --> 00:01:31,750
as before but now, you have your template as part of your Javascript file.

16
00:01:31,770 --> 00:01:38,500
Now I know that it can look strange to start writing HTML inside of your Javascript file,

17
00:01:38,550 --> 00:01:44,490
keep in mind that this in the end is just a normal string and it can look strange but it is a nice way

18
00:01:44,730 --> 00:01:49,130
of creating a reusable HTML element.

19
00:01:49,230 --> 00:01:56,250
Now we can also use a next gen Javascript feature called template literals where we use back ticks instead

20
00:01:56,250 --> 00:01:58,310
of single quotation marks,

21
00:01:58,320 --> 00:02:04,580
so this is not a single quotation mark, this is a back tick, opening and closing and this will still create

22
00:02:04,580 --> 00:02:13,130
a string but now we can write a multiline string here so that we can format this in a nicer way. If we now

23
00:02:13,140 --> 00:02:14,040
save this,

24
00:02:14,190 --> 00:02:16,980
you will see it still works as before.

25
00:02:16,980 --> 00:02:23,120
So it's just a bit strange to get used to that, in some IDEs, you get really great auto completion support here

26
00:02:23,160 --> 00:02:29,700
though, mine doesn't pick it up here but still I will go with this approach because whilst it is strange

27
00:02:29,700 --> 00:02:38,040
to look at, we now have all the logic in the Javascript file, making this a really simple reusable web

28
00:02:38,040 --> 00:02:39,480
component.

29
00:02:39,710 --> 00:02:48,170
Now one important thing, you might wonder how can I set the HTML content here inside my constructor?

30
00:02:48,170 --> 00:02:56,270
The reason is simple, innerHTML is just a property of our element here, of our object and this

31
00:02:56,270 --> 00:03:02,360
is just setting up some HTML code that will be rendered to to DOM once this element is mounted

32
00:03:02,360 --> 00:03:03,620
to the DOM.

33
00:03:03,620 --> 00:03:11,840
So unlike append child, this does not try to access the DOM at this point, it just prepares some content

34
00:03:11,840 --> 00:03:18,020
for the DOM once it later is available and the browser will take care about rendering this when it is

35
00:03:18,020 --> 00:03:18,500
able to.