Hello, everyone, and welcome back.
In the last few lessons we have discussed in detail the default angular view encapsulation mechanism.
If you remember this view encapsulation mechanism that we have been covering is based on these special
attributes that are added automatically by ANGULAR whenever it's building the view.
The presence of these attributes is what allows Angular to build these more specific styles that are
targeting only the interior of the component.
Now this view encapsulation mechanism is the default view encapsulation mechanism of angular.
There are others.
This one is based on planes, yesses and these extra attributes that we add to each element.
But if we switch here to our cursor component, we're going to see that there are ways of doing view
encapsulation.
So if we select here the encapsulation property of the component decorator, we're going to see that
we have here several options available, emulated view encapsulation.
That's what we have been seeing so far.
This is the default view encapsulation mechanism of angular.
So if you select these value and we try our program out, we're going to see that everything is still
working as expected.
So this is the default value that uses those special attributes that we have been seeing so far.
This is the recommended way of doing success in your angular components.
Simply use the default simulated view encapsulation.
This works great.
It allows us to specify styles that are specific to each component that won't interfere with the rest
of the piece.
However, if you prefer to simply style your application using Bladen CCIS, you can also do that.
In order to do that, we need to choose here the view, encapsulation and then option.
So if we try this out, we are going to see that probably our styles are going to be a little bit different.
And this is because with View Encapsulation, then these hosts tell, for example, no longer makes
as much sense.
Also hear the host context.
Style does not make sense anymore.
In this mode, the notion of host element does not apply.
To see exactly what is going on here, let's switch to a larger window and have a look here, for example,
at the course title so we can see the styles on the title are applied as is without any encapsulation
attributes that we have seen so far.
This is just a plain regular Cyesis style.
It's great that we can add this style here to a file that is specific to the component.
But what ANGULAR is doing with View Encapsulation then is bundling all these styles in all the different
components, style files, and it's adding them to a global style sheet without further processing and
without making these styles specific to the component.
These are all Blaen Sears's styles, as you are used to.
If you would like to rewrite these styles that you have here in order to target the host element, such
as, for example, this style here, then in that case we can simply use here the course curve element.
We would use this everywhere where we are using the host modifier, and with that we would be able to
target the host element of the course skirt component.
In the case of our feme, which was using here the host context, key word, we would need to remove
the use of host context.
Let's simply define here a plain Cyesis style.
And with this we would have our style applied again to the page.
Notice that just like we saw before now, the styles are not isolated and specific to the component.
We can see that the Solomon theme is again getting applied here to the test care.
So the style is global to the whole page.
Let's now see what other view encapsulation options we have.
So we have covered no view encapsulation emulated.
That's the default.
And we have here native view encapsulation.
This option is deprecated and we should not use it anymore.
The last option that we are going to cover that is available is the shadow dom option.
So the shadow dom is a built-In Browsr mechanism for doing view encapsulation.
So it does something similar to emulated view encapsulation.
It allows us to build styles that are specific to only certain elements on the page, but it does so
natively, directly using Browsr provided functionality instead of using those special attributes that
we have been using for increasing the specificity of component styles.
If we have a look at what the page looks like using shadow dom encapsulation, we're going to see that
most of the styles are still getting applied.
But for example, the style that we have changed here, the theme is no longer getting applied.
So we are in a similar situation to emulate if you encapsulation.
But this time around we are using browser APAs.
Let's add here back the use of host context to.
Activate our Solman Feme, so if we refresh the application, we are going to see that indeed this here
is only getting applied here to the component and not to the test that we are using here outside of
the component that also has this Gless Sulman Feme applied to it.
Let's have a look at how the shadow dom view encapsulation works in practice, inspecting here our course
carefully using the chrome dev tools.
We are going to see that all the e-mail contained is inside this chavel root.
The shagger root is like a new browser document, very similar to the page where we are adding this
component.
And inside it we have here a series of styles we are going to find here the styles that are getting
applied here to our component.
And as we can see, the style tag here is only visible inside this shadow root.
These styles are not going to affect the rest of the page.
They are only visible inside the core component.
If you have a look here at the style of play, we are going to see that indeed the styles are not getting
here.
Those extra attributes that we saw before.
And this is because the style is only visible here inside the shallow root.
So there is no need to add here extra properties to make the style more specific.
By definition, with the use of the shadow dom, the style will be confined to the interior of this
shallow root, which is basically a separate HTML document.
As you can see, the end result is very similar.
In general, it's better to use the default view encapsulation mechanism.
So right now this default view encapsulation mechanism is based on these special attributes that increase
the specificity of the component styles.
But in the future, when the shadow DOM standard is completely implemented across browsers, it will
then be very possible that the default view encapsulation mechanism is going to become the shadow dom.
And with this, we have reached the conclusion of our view encapsulation section.
What we're going to learn next is angular services.
Let's start by writing our own angular injectables service and then based on that, we are going to
do a deep dive into the angular dependency injection system.