1
00:00:02,240 --> 00:00:07,180
Enough of the talking, let's dive into learning more about custom elements for now,

2
00:00:07,190 --> 00:00:13,010
so about the core part of web components and let's write some code.

3
00:00:13,010 --> 00:00:16,820
First of all, it's important to differentiate that for custom elements,

4
00:00:16,850 --> 00:00:19,980
we actually got two different ways of creating them.

5
00:00:20,060 --> 00:00:23,570
For one, you can create so-called autonomous elements,

6
00:00:23,570 --> 00:00:29,810
these are basically your own custom elements that don't depend on anything, that are totally independent

7
00:00:29,840 --> 00:00:34,310
of existing HTML elements that are built into the browser.

8
00:00:34,310 --> 00:00:41,030
Alternatively, you can also create your own custom elements by extending built-in elements though, like

9
00:00:41,030 --> 00:00:47,300
extending the built-in button or the built-in paragraph and that also can be a way of creating custom elements.

10
00:00:47,840 --> 00:00:54,350
In this course, we'll mostly build autonomous elements but actually we'll show you both ways of creating

11
00:00:55,220 --> 00:01:01,130
your own custom elements, your own web components and I will use the name custom element and web component

12
00:01:01,130 --> 00:01:02,380
interchangeably here,

13
00:01:02,480 --> 00:01:08,840
so you can build custom HTML tags in both ways and I will show you both ways and both are fine to use

14
00:01:09,020 --> 00:01:11,570
depending on what you're building,

15
00:01:11,570 --> 00:01:15,370
often you want to have your totally separate custom element though,

16
00:01:15,470 --> 00:01:19,320
so this autonomous way is probably the more common way.

17
00:01:19,460 --> 00:01:25,870
But how do you build your own web components in that way then? For that,

18
00:01:25,930 --> 00:01:30,500
I created a new folder, anywhere on your computer you can create it,

19
00:01:30,520 --> 00:01:32,370
it's totally empty as you can tell

20
00:01:32,590 --> 00:01:36,910
and I'll open it or I opened it with Visual Studio Code.

21
00:01:36,910 --> 00:01:39,730
Now in here, I did one important thing,

22
00:01:39,730 --> 00:01:48,010
if you hit control shift P or on Mac, command shift P, you'll open this command menu here and here

23
00:01:48,220 --> 00:01:53,700
if you type theme, then you'll find this preferences color theme option and there,

24
00:01:53,770 --> 00:01:57,250
I switch to dark plus which is the theme which gives me this dark

25
00:01:57,260 --> 00:02:03,010
look, you can of course also use other themes here and I did one other thing,

26
00:02:03,100 --> 00:02:11,220
if you go into these extensions part by clicking on view, extensions here, there if you search for material

27
00:02:11,280 --> 00:02:17,400
icon, you'll find that material icon theme which I also installed, this is totally optional,

28
00:02:17,400 --> 00:02:20,230
it just changes some of my file icons

29
00:02:20,250 --> 00:02:22,600
once we start adding files to the project.

30
00:02:22,680 --> 00:02:27,920
So if you want to get that same file icon look I have, you have to install and enable that material.

31
00:02:27,930 --> 00:02:33,180
icon theme. Thereafter, you can go back to your explorer view here.

32
00:02:33,260 --> 00:02:33,510
Okay

33
00:02:33,840 --> 00:02:35,820
so this is now the view in which we'll work

34
00:02:35,820 --> 00:02:38,040
and there, I will add two files.

35
00:02:38,100 --> 00:02:40,630
The first one is an index.html file,

36
00:02:40,680 --> 00:02:42,450
theoretically you can name it anything you want

37
00:02:42,780 --> 00:02:49,250
and this will be the dummy page we use for hosting and running our own custom elements. There

38
00:02:49,260 --> 00:02:55,560
I'll just type HTML and now in Visual Studio Code I get this autocompletion where I can pick that

39
00:02:55,620 --> 00:03:02,850
HTML5 template and if I now hit enter, I get a basic HTML5 skeleton here out of the

40
00:03:02,850 --> 00:03:09,540
box, I'll give it a title of web components and now here in the body, we can start playing around with

41
00:03:09,600 --> 00:03:15,780
our own web components. The code for the web components will be written in a different file and here

42
00:03:16,200 --> 00:03:22,210
I will add a tooltip.js file because I want to start by writing a tooltip component.

43
00:03:22,410 --> 00:03:28,320
So this is now the file where I will write the code, the Javascript code to create my own custom element

44
00:03:28,860 --> 00:03:34,590
and therefore I will add one more thing here, in the index.html file, I'll add a script tag in the

45
00:03:34,590 --> 00:03:41,640
head section where I simply import that tooltip.js file and thereafter this will automatically

46
00:03:41,640 --> 00:03:48,300
run any code we add in that tooltip file and we will add some code here to define our own custom element

47
00:03:48,630 --> 00:03:51,270
and that is exactly what we do in the next lecture.