1
00:00:03,969 --> 00:00:06,130
Hello, everyone, and welcome back.

2
00:00:06,160 --> 00:00:12,070
In the last few lessons we have discussed in detail the default angular view encapsulation mechanism.

3
00:00:12,190 --> 00:00:18,130
If you remember this view encapsulation mechanism that we have been covering is based on these special

4
00:00:18,130 --> 00:00:23,050
attributes that are added automatically by ANGULAR whenever it's building the view.

5
00:00:23,050 --> 00:00:29,710
The presence of these attributes is what allows Angular to build these more specific styles that are

6
00:00:29,710 --> 00:00:32,950
targeting only the interior of the component.

7
00:00:33,100 --> 00:00:39,630
Now this view encapsulation mechanism is the default view encapsulation mechanism of angular.

8
00:00:39,670 --> 00:00:40,460
There are others.

9
00:00:40,510 --> 00:00:47,580
This one is based on planes, yesses and these extra attributes that we add to each element.

10
00:00:47,620 --> 00:00:53,830
But if we switch here to our cursor component, we're going to see that there are ways of doing view

11
00:00:53,830 --> 00:00:54,760
encapsulation.

12
00:00:54,770 --> 00:01:00,700
So if we select here the encapsulation property of the component decorator, we're going to see that

13
00:01:00,700 --> 00:01:04,590
we have here several options available, emulated view encapsulation.

14
00:01:04,599 --> 00:01:07,170
That's what we have been seeing so far.

15
00:01:07,210 --> 00:01:10,900
This is the default view encapsulation mechanism of angular.

16
00:01:10,960 --> 00:01:16,720
So if you select these value and we try our program out, we're going to see that everything is still

17
00:01:16,720 --> 00:01:17,780
working as expected.

18
00:01:17,800 --> 00:01:23,980
So this is the default value that uses those special attributes that we have been seeing so far.

19
00:01:24,220 --> 00:01:29,230
This is the recommended way of doing success in your angular components.

20
00:01:29,230 --> 00:01:32,600
Simply use the default simulated view encapsulation.

21
00:01:32,650 --> 00:01:33,730
This works great.

22
00:01:33,730 --> 00:01:39,820
It allows us to specify styles that are specific to each component that won't interfere with the rest

23
00:01:39,820 --> 00:01:40,510
of the piece.

24
00:01:40,570 --> 00:01:46,330
However, if you prefer to simply style your application using Bladen CCIS, you can also do that.

25
00:01:46,330 --> 00:01:51,760
In order to do that, we need to choose here the view, encapsulation and then option.

26
00:01:51,790 --> 00:01:56,530
So if we try this out, we are going to see that probably our styles are going to be a little bit different.

27
00:01:56,620 --> 00:02:02,530
And this is because with View Encapsulation, then these hosts tell, for example, no longer makes

28
00:02:02,530 --> 00:02:03,580
as much sense.

29
00:02:03,590 --> 00:02:05,800
Also hear the host context.

30
00:02:05,800 --> 00:02:07,840
Style does not make sense anymore.

31
00:02:07,870 --> 00:02:12,340
In this mode, the notion of host element does not apply.

32
00:02:12,370 --> 00:02:17,830
To see exactly what is going on here, let's switch to a larger window and have a look here, for example,

33
00:02:17,830 --> 00:02:25,480
at the course title so we can see the styles on the title are applied as is without any encapsulation

34
00:02:25,480 --> 00:02:27,850
attributes that we have seen so far.

35
00:02:28,000 --> 00:02:31,120
This is just a plain regular Cyesis style.

36
00:02:31,330 --> 00:02:36,430
It's great that we can add this style here to a file that is specific to the component.

37
00:02:36,430 --> 00:02:43,450
But what ANGULAR is doing with View Encapsulation then is bundling all these styles in all the different

38
00:02:43,450 --> 00:02:50,170
components, style files, and it's adding them to a global style sheet without further processing and

39
00:02:50,170 --> 00:02:53,510
without making these styles specific to the component.

40
00:02:53,560 --> 00:02:57,280
These are all Blaen Sears's styles, as you are used to.

41
00:02:57,370 --> 00:03:03,280
If you would like to rewrite these styles that you have here in order to target the host element, such

42
00:03:03,280 --> 00:03:09,120
as, for example, this style here, then in that case we can simply use here the course curve element.

43
00:03:09,130 --> 00:03:15,370
We would use this everywhere where we are using the host modifier, and with that we would be able to

44
00:03:15,370 --> 00:03:19,290
target the host element of the course skirt component.

45
00:03:19,300 --> 00:03:26,110
In the case of our feme, which was using here the host context, key word, we would need to remove

46
00:03:26,230 --> 00:03:27,910
the use of host context.

47
00:03:27,940 --> 00:03:30,970
Let's simply define here a plain Cyesis style.

48
00:03:31,060 --> 00:03:34,620
And with this we would have our style applied again to the page.

49
00:03:34,630 --> 00:03:40,840
Notice that just like we saw before now, the styles are not isolated and specific to the component.

50
00:03:40,840 --> 00:03:45,670
We can see that the Solomon theme is again getting applied here to the test care.

51
00:03:45,700 --> 00:03:48,600
So the style is global to the whole page.

52
00:03:48,610 --> 00:03:51,850
Let's now see what other view encapsulation options we have.

53
00:03:51,850 --> 00:03:55,240
So we have covered no view encapsulation emulated.

54
00:03:55,240 --> 00:03:56,350
That's the default.

55
00:03:56,350 --> 00:03:59,110
And we have here native view encapsulation.

56
00:03:59,230 --> 00:04:03,730
This option is deprecated and we should not use it anymore.

57
00:04:03,820 --> 00:04:08,350
The last option that we are going to cover that is available is the shadow dom option.

58
00:04:08,350 --> 00:04:13,780
So the shadow dom is a built-In Browsr mechanism for doing view encapsulation.

59
00:04:13,780 --> 00:04:18,010
So it does something similar to emulated view encapsulation.

60
00:04:18,010 --> 00:04:24,730
It allows us to build styles that are specific to only certain elements on the page, but it does so

61
00:04:24,730 --> 00:04:31,600
natively, directly using Browsr provided functionality instead of using those special attributes that

62
00:04:31,600 --> 00:04:35,980
we have been using for increasing the specificity of component styles.

63
00:04:35,980 --> 00:04:40,810
If we have a look at what the page looks like using shadow dom encapsulation, we're going to see that

64
00:04:40,810 --> 00:04:43,750
most of the styles are still getting applied.

65
00:04:43,900 --> 00:04:50,080
But for example, the style that we have changed here, the theme is no longer getting applied.

66
00:04:50,080 --> 00:04:53,950
So we are in a similar situation to emulate if you encapsulation.

67
00:04:53,950 --> 00:04:57,250
But this time around we are using browser APAs.

68
00:04:57,310 --> 00:05:00,460
Let's add here back the use of host context to.

69
00:05:00,530 --> 00:05:07,100
Activate our Solman Feme, so if we refresh the application, we are going to see that indeed this here

70
00:05:07,190 --> 00:05:13,010
is only getting applied here to the component and not to the test that we are using here outside of

71
00:05:13,010 --> 00:05:18,480
the component that also has this Gless Sulman Feme applied to it.

72
00:05:18,530 --> 00:05:24,860
Let's have a look at how the shadow dom view encapsulation works in practice, inspecting here our course

73
00:05:24,860 --> 00:05:26,600
carefully using the chrome dev tools.

74
00:05:26,600 --> 00:05:31,520
We are going to see that all the e-mail contained is inside this chavel root.

75
00:05:31,670 --> 00:05:37,220
The shagger root is like a new browser document, very similar to the page where we are adding this

76
00:05:37,220 --> 00:05:37,850
component.

77
00:05:37,850 --> 00:05:43,820
And inside it we have here a series of styles we are going to find here the styles that are getting

78
00:05:43,820 --> 00:05:45,550
applied here to our component.

79
00:05:45,560 --> 00:05:51,110
And as we can see, the style tag here is only visible inside this shadow root.

80
00:05:51,260 --> 00:05:54,740
These styles are not going to affect the rest of the page.

81
00:05:54,770 --> 00:05:58,190
They are only visible inside the core component.

82
00:05:58,220 --> 00:06:04,190
If you have a look here at the style of play, we are going to see that indeed the styles are not getting

83
00:06:04,190 --> 00:06:04,520
here.

84
00:06:04,520 --> 00:06:06,710
Those extra attributes that we saw before.

85
00:06:06,710 --> 00:06:11,260
And this is because the style is only visible here inside the shallow root.

86
00:06:11,360 --> 00:06:16,040
So there is no need to add here extra properties to make the style more specific.

87
00:06:16,040 --> 00:06:22,400
By definition, with the use of the shadow dom, the style will be confined to the interior of this

88
00:06:22,400 --> 00:06:26,560
shallow root, which is basically a separate HTML document.

89
00:06:26,570 --> 00:06:29,170
As you can see, the end result is very similar.

90
00:06:29,180 --> 00:06:33,510
In general, it's better to use the default view encapsulation mechanism.

91
00:06:33,530 --> 00:06:40,190
So right now this default view encapsulation mechanism is based on these special attributes that increase

92
00:06:40,190 --> 00:06:42,240
the specificity of the component styles.

93
00:06:42,290 --> 00:06:47,930
But in the future, when the shadow DOM standard is completely implemented across browsers, it will

94
00:06:47,930 --> 00:06:54,100
then be very possible that the default view encapsulation mechanism is going to become the shadow dom.

95
00:06:54,110 --> 00:06:58,520
And with this, we have reached the conclusion of our view encapsulation section.

96
00:06:58,550 --> 00:07:01,700
What we're going to learn next is angular services.

97
00:07:01,940 --> 00:07:07,670
Let's start by writing our own angular injectables service and then based on that, we are going to

98
00:07:07,670 --> 00:07:11,870
do a deep dive into the angular dependency injection system.