1
00:00:02,320 --> 00:00:05,920
So being able to write custom HTML elements is pretty cool,

2
00:00:05,920 --> 00:00:11,830
I did mention though that web components is actually a broad term for a couple of specifications that

3
00:00:11,860 --> 00:00:18,370
are built into modern browsers that make up that web components term. Custom HTML elements is just

4
00:00:18,370 --> 00:00:21,180
one part of that set of specifications,

5
00:00:21,220 --> 00:00:22,790
it's one specification,

6
00:00:22,960 --> 00:00:29,010
it's arguably the most important one because this defines a couple of features modern browsers exposed

7
00:00:29,020 --> 00:00:33,700
to you and you can use these features in Javascript then and you will also learn how to make it work

8
00:00:33,700 --> 00:00:39,040
in older browsers in this course. So you get this set of features that allows you to register your own

9
00:00:39,100 --> 00:00:43,290
HTML tags and define some basic logic behind that.

10
00:00:43,300 --> 00:00:50,710
However this alone will not give you great web components, another important specification that makes

11
00:00:50,710 --> 00:00:54,820
up the web components turn is the shadow DOM specification.

12
00:00:54,820 --> 00:01:01,900
The shadow DOM is all about having a separate DOM, a tree of DOM nodes behind your custom element that

13
00:01:01,900 --> 00:01:04,360
is separated from the normal DOM,

14
00:01:04,360 --> 00:01:09,820
this helps you for example with scoping your styles to your custom element, so that styling you set up for

15
00:01:09,820 --> 00:01:13,830
your custom element doesn't interfere with other parts of your application,

16
00:01:13,870 --> 00:01:20,180
really useful. Templates and slots is another important part of the specification.

17
00:01:20,270 --> 00:01:26,530
Your custom element will in the end just be a combination of default HTML elements because in the

18
00:01:26,530 --> 00:01:32,680
end, the browser only knows how to handle these but you can compose them and add styling and add Javascript

19
00:01:32,680 --> 00:01:37,690
logic to create more powerful widgets, like the modal you saw and you will learn how that works throughout

20
00:01:37,690 --> 00:01:38,800
the course.

21
00:01:38,800 --> 00:01:45,280
Templates and slots are another important specification here because here, you define this core structure

22
00:01:45,340 --> 00:01:46,960
behind your element,

23
00:01:46,960 --> 00:01:53,260
so you basically define the template which is then rendered as a shadow DOM and slots are helpful for

24
00:01:53,260 --> 00:01:57,150
exposing certain entry points, like that title we used in

25
00:01:57,160 --> 00:01:58,840
the last lecture, this h1 tag

26
00:01:58,840 --> 00:02:07,150
we passed to slot title that allows us to pass dynamic content into our web component so that developers

27
00:02:07,180 --> 00:02:12,190
using our web components can use them and the set of features that are baked in

28
00:02:12,190 --> 00:02:18,130
and still if our components wants that, pass extra content into the component and you will learn all about

29
00:02:18,130 --> 00:02:20,220
that throughout the course as well.

30
00:02:20,290 --> 00:02:26,170
Now last but not least, there's another specification you sometimes hear about when hearing about web components

31
00:02:26,620 --> 00:02:34,660
and that is the HTML imports specification. That was meant to be a feature which allows you to import

32
00:02:34,830 --> 00:02:41,560
HTML files into HTML files so that you can define these templates for your components in HTML

33
00:02:41,560 --> 00:02:44,020
files that are then imported dynamically.

34
00:02:44,020 --> 00:02:50,170
Now this is not continued anymore because the industry moved in a direction where we use Javascript

35
00:02:50,170 --> 00:02:56,770
for all of that and where we use modern build tools and Javascript modules to import and export inside

36
00:02:56,770 --> 00:03:02,650
of our Javascript files and import the HTML templates as strings there as well

37
00:03:02,650 --> 00:03:07,160
and this is also the approach you will see in this course and I will explain and show it there.

38
00:03:07,210 --> 00:03:13,900
So it's just important to be aware of these three core features - custom elements, shadow DOM, templates

39
00:03:13,900 --> 00:03:19,180
and slots and we will dive deeply into them and learn all about them and how we use them throughout the course

40
00:03:19,180 --> 00:03:19,830
of course.