Build Web Apps with Angular 2 View Encapsulation
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "View Encapsulation" Lesson
>> Lukas Ruebbelke: One more thing that I do want to point out, talking about kind of the self-contained components, is View Encapsulation. And so, this allows us to to apply styles and choose how we scope them to our components. So using ViewEncapsulation.None, you create a style and it's gonna just blow out images.
[00:00:25] Just basically going to be applied to everything dynamically. If you use View.Encapsulation.Emulated, actually, let me skip to native first, so this is the default and it's going to use Shadow DOM. So when you create a style on your component, it's only available to that component and his children and then ViewEncapsulation emulated is, I haven't used this one.
[00:00:52] Scott, do you know what this? I haven't use emulated, do you know what this does?
>> Scott Moss: Yeah. It's default.
>> Lukas Ruebbelke: Is this emulated default?
>> Scott Moss: Yeah. It's a default. So it just like adds like cryptic characters to the.
>> Lukas Ruebbelke: Right, so we saw that actually on the router outlet, or rather the thing that was adding, like when did this happen.
>> Speaker 3: And it sticks a style tag in the.
>> Scott Moss: Yeah.
>> Lukas Ruebbelke: So, we'll do just a quick demo of this, and then we'll get to our, we'll at least talk about the challenge before we get to our delicious food. We'll see.
>> Lukas Ruebbelke: So where is, view encapsulation, okay.
>> Lukas Ruebbelke: So what you can see here, we have two H1 tags in the parent component, it is red and in the child component it is green, how is that happening? Well, in my.Component.TS we're saying H1 is green and it's being emulated. So it is basically saying, okay, we are going to add this dynamically generated style and it's going to generate this on the fly.
[00:02:23] Now if we go back here and we go to
>> Lukas Ruebbelke: MyComponent and we set this to None.
>> Lukas Ruebbelke: I think it's actually, I got my casing wrong here.
>> Lukas Ruebbelke: You can see that by setting that style, it's not only affected the parent component but it's actually affected the entire page.
[00:03:23] Except for this one. Interestingly enough. So it's actually saying, I'm gonna go out and I'm gonna basically blow this out. But in the parent component, because we have its own encapsulation, so if I went here to none. Let's see what happens.
>> Lukas Ruebbelke: So this is interesting that [COUGH] this one is blowing it out, but then this one is going down to the child component.
>> Speaker 4: Is that because of the important statement?
>> Lukas Ruebbelke: I believe so, so let's see if we take this off.
>> Lukas Ruebbelke: So let's go here and see what native does.
>> Lukas Ruebbelke: Did I break something? Let me see.
>> Lukas Ruebbelke: That is weird.
>> Lukas Ruebbelke: Let's go back to emulated. Let's go back into our child component.
>> Lukas Ruebbelke: Let's just reset this real quick.
>> Lukas Ruebbelke: Everything is back to normal, red and green. So I am interested in why-
>> Speaker 4: Maybe when it's, when you're doing, nevermind-
>> Lukas Ruebbelke: So I'm not going to fret about this, I'm certainly not going to let it ruin my lunch. But I did think it was interesting that the child component when I set it to none, was actually reaching out across, outside of the parent component and setting it but the parent component wasn't getting set.
[00:05:40] But then once I changed the parent component that the child component styles was still taking. But then the parent component was being applied to the child. So that is a mystery that I will probably ponder well into my chicken kabobs.
>> Speaker 4: I think the child style tag is prior to the parent style tag.
>> Lukas Ruebbelke: In terms of how it's being loaded to the page?
>> Speaker 4: Yeah.
>> Scott Moss: Yeah.
>> Speaker 4: That seems like what would be causing it.
>> Lukas Ruebbelke: Set this to none. Let's see and to shed some light on this.
>> Lukas Ruebbelke: Expect, let's see if we got a
>> Lukas Ruebbelke: Yeah, so I'd wager that is what is happening, and so you can see that it's actually adding in styles.
[00:06:53] And it's an order issue and this is why this is in the top one, that's specific to the parent component but here's it's a general, kind of a stylized thing.
>> Speaker 4: And I think if you set the parent to none as well, I think then, that it would put those style tags.
[00:07:18] At least, I'm making an assumption.
>> Lukas Ruebbelke: I think it'd be interesting to see if the order is affecting where it's saying like red is the first because it's the parent and then green is second because it's the child and it's actually overwriting that.
>> Speaker 4: Rendered h1.
>> Lukas Ruebbelke: Yep.
[00:07:34] So interesting that, if you have conflicting styles, simple cuz it's gonna put it in the page from parent to child, then you can override.
>> Speaker 4: Override now, though, right?
>> Lukas Ruebbelke: So I bet, these are both red.
>> Speaker 4: And they both have that extra class of .render.
>> Lukas Ruebbelke: Yes, but because we're setting this general h1 tag on the child component, it's being added to the DOM.
[00:08:01] And so it's setting everything else to green because it's just this generic h1 tag, so do keep that in mind. This would bite me probably, at least once, or twice. I could see see this, somebody being like, what is going on here? How come I'm stating the style here, and it's going outside of it?
[00:08:23] Or, I'm expecting this to cascade down, and it's not. If you run into that, the solution is to jump into and if your head tag, and see like how are these styles being applied? And obviously overwriting an H1 tag I think is irresponsible, shame on me, I should've never done that, but there we go.
[00:08:44] So, a bit of a fun experiment on that.