1
00:00:02,570 --> 00:00:08,930
So now that we learned about these different specifications and we will learn what they do and how we

2
00:00:08,930 --> 00:00:10,550
use them in detail step-by-step,

3
00:00:10,550 --> 00:00:18,230
no worries, now that we learned that though, it's also important to recognize that not all browsers do support

4
00:00:18,320 --> 00:00:24,170
all these specifications and especially older browsers, like Internet Explorer 11

5
00:00:25,010 --> 00:00:26,990
support even less.

6
00:00:26,990 --> 00:00:29,170
Now let's have a look at browser supports therefore.

7
00:00:29,180 --> 00:00:37,080
Now the easiest way of finding the browser support is by simply googling for web components

8
00:00:37,370 --> 00:00:40,720
and then you can visit webcomponents.org,

9
00:00:40,820 --> 00:00:49,070
this page there and on this page if you scroll down, you will find this browser support table here and

10
00:00:49,070 --> 00:00:55,610
there you see all major browsers and how they're supporting the different web component specifications.

11
00:00:55,770 --> 00:01:02,760
As a side note, here you also see the ES modules specification, that is something which I didn't mention

12
00:01:02,760 --> 00:01:03,450
on the slide,

13
00:01:03,450 --> 00:01:10,200
it's not directly a part of the web components specification set, this in the end is related to how we

14
00:01:10,200 --> 00:01:16,730
can import Javascript files into Javascript files and we will find a solution for that later in the course

15
00:01:16,740 --> 00:01:23,500
too. The first three rows mentioned the parts you saw in my slides though, the custom elements, the HTML

16
00:01:23,520 --> 00:01:25,010
templates and the shadow DOM

17
00:01:25,200 --> 00:01:29,420
and as you can see right now, browsers support is already very decent,

18
00:01:29,520 --> 00:01:31,940
it's getting added to Edge too,

19
00:01:32,110 --> 00:01:35,450
at the point of time you're viewing the course, this might already have changed

20
00:01:35,490 --> 00:01:37,460
and until then we can use a polyfill,

21
00:01:37,500 --> 00:01:45,480
so a third-party package that basically gets the browser to support this and therefore we can use what

22
00:01:45,480 --> 00:01:53,460
you learned in this course in all major browsers. If you want to get a more detailed list of which browser

23
00:01:53,460 --> 00:01:59,550
supports which feature, you can google for caniuse and then for example, custom elements and you

24
00:01:59,550 --> 00:02:08,770
could also use shadow DOM or HTML templates there and you will then find the caniuse page here and

25
00:02:08,970 --> 00:02:11,500
there you take that custom elements we want link

26
00:02:15,000 --> 00:02:21,490
and on this page, you then see browsers support for this feature and this looks a bit worse than the prior

27
00:02:21,490 --> 00:02:27,640
page because there is more red on it but this is the more helpful page because you will see that for

28
00:02:27,640 --> 00:02:33,370
example Edge hasn't implemented this yet, again you can make it work with polyfills though but you

29
00:02:33,370 --> 00:02:38,380
can see that for development you should really use a modern version of Firefox or Chrome and then later

30
00:02:38,440 --> 00:02:42,220
you will learn how to make your web components work in more browsers.