I'm going to change completely the topic to talk to you about the different mechanisms we encapsulate
and Willoughby's when I refer to encapsulating views, I mean, in which way the stance of a component
are isolated from the rest.
Angler provides three different mechanisms to encapsulate the styles of a component and related encapsulation.
That is the default one used native encapsulation and the option to not encapsulate components at all.
To understand the difference between them, I want to create two more time components.
So I'm going to duplicate my time of all the copy.
I based it on the same level here based.
And I'm going to change the name to Taimur native.
I opened the component and replaced the name to prevent collisions with the original one, so I might
vecchia selecter, that's going to be obtainment negative and this is going to be called Taimur negative
component.
Of course, I want to use here the negative encapsulation.
So I here encapsulation in the company of the metadata.
This will be a native, of course, they have to import it.
And I'm going to repeat the same process with your copy folder based on the same level.
And I renamed the fall of the time unknown because I'm not going to use encapsulation here.
I opened the component and in this case, the selector is not going to be obtainment negative, but
it will be obtainment, known and of course, dimer non component.
And in this case, encapsulation will be none.
Remember, I told you there are three types of encapsulation we can use and Milada, but this is the
default, the one we're using in timer.
So it's the one used if you don't write anything.
However, in this case, we're going to use encapsulation.
None, of course, after the new components to the main module.
So open at multiuse and here in declarations at time.
Native component.
And also Zammar known compound and of course, after import both import Tamminen and the time when they
do now, Angler's is aware of those components so I can use them in my app component.
It's the HTML and we're going to find the last to obtain.
So the first one will be obtainment native.
And the other one will be empty, none.
You can forget about those red lines, they're closed because of the language service of Anguilla that
is applying to autocomplete on the template site, using the component properties written in typescript.
There's those not recognizing the newly important components, but don't worry, they're working.
So anyway, I haven't looked to the stars, but I can see in the results that there are some differences
between those components.
The most obvious is that the first time is whether this is not related with encapsulation changes.
But it's gozde because on the Mambu there are some styles for the obtainment component that the reason
we're here, we are playing some styles that we are not playing on the others.
Despite this, the most important thing is the third component has lost completely these tiles.
In fact, I can remove completely this tousle, this component time component around this stuff.
And if I fail to see the result, I have exactly the same thing.
So is the family not applying the styles of the component?
This is Cowes because if you don't use your encapsulation and in the case of this component, we are
using encapsulation and then you can use this as a selector that we were using here previously.
Besides that, if inspect the first time out, right, click inspect element, have an attribute and
the score and just have them and some alphanumeric code like this one.
And this attribute does not years by any other component.
You can see that the components that have this underscore and just say one, this is what dangler that
Streamwood encapsulation.
Look at those VSS The component styles are being applied to any element with this attribute.
Look here, those engie cost C zero and see when they're encapsulated styles for different elements
of my bill.
This way I will make sure that those are specific styles apply only to this specific component because
the styles are only applied to the component that have that attribute.
In the case of Obtainment MEDEF, we don't have that attribute, but we have something different.
If I show the content, there's this other root stuff I click to open and inside I can see that there's
the component and also several styles tax their browsers like Google Chrome that support shuttle them
in a native way.
Those browsers implement an API that allows us grap to create a brand new dume for this component.
And in this case I I using this API, as you can see it copied the styles of all the other bios.
Thus from here, for example, they do not belong to this element obtainment native, but belong to
this component.
But the only way this stands from the wheels are copied in case you need them inside your component.
And then finally the styles from the component are also copied, as you can see here.
The interesting thing here is that this comes from your own company will never move outside of Appetiser
Native.
And because of that, the other components will not be aware of those styles.
So they cannot modify all the elements of the application getting similar results with what we have
seen with Emulator Encapsulation.
Finally, we have an encapsulation and OK, I can use the hust CSL class selector, but also as I am
not having any kind of schedule them, any style that I add to this component will be shared with the
rest of the BU affecting other components.
Let's put it in practice.
I'm going to open this tiles from my original timer here, timer, timer, component SPSS.
And at the end outside past I will add a class mutans with some border for pixels solid grey.
So I save it and I want to see the results.
As you can see, the border only appears on the first timer in the element with the glass buttons.
And this is because thank you of the emulated encapsulation I this Entercom than say one attribute here
that prevents this style to affect all the components.
So my other components, class class, do not have this board that have just created even in the case
of creating this glass outside my house, I like to remember how strongly apply inside the element,
but I have created this button's class outside so we can think it will affect all the components.
But this don't happen.
Thank you to the encapsulated emulation.
OK, more examples.
I copied this model here to any time a native and I will change the color so I can see the difference
between them.
Change it for that.
Grey, back to the results.
I can see that these are the grey is only applying also to the second component.
So that's not a grid in the first one either.
The third one.
And that's because this is tile has only been defined inside the private dom of this uptime or negative
element.
Let me show you again, inspect the element.
You can see the glass buttons here.
I can click to go to Stylesheet and it highlights me one fragment of the shuttle bomb.
This style is defined here by the end of this external --.
OK, let's turn now the stance of the company that it's not using Shadowland.
So I open the ESA.
Sense of time are known, and at the end of the command, I'm going to add something similar, but instead
of this border, I leave the class a background color and this background color will be light gray.
So I say back to The View and what happened.
As you can see, all the components have this background.
Besides, I only created on the last component.
So in this case, the changes they made to the class buttons inside my company, uptime, known, in
fact, are affecting the whole them because this component is not encapsulated the component styles
affecting do each and every one of the components.
Now, you know the differences between all the encapsulating options that Angela offers.
Let me go back to the cold and remove all those changes that were made only to explain this concept.
So I get the full time and on I remove it for the time and narrative exactly the same, and go to a
module and remove those changes and they'll send the e-mail under those changes to have three uptimes
of the same type.
Finally, I also remove this border in time, accompanied SPSS back to the results to be update.
And now I have three identical Tamai components.