css encapsulation in Angular

Question

I have been recently exploring the css and dom encapsulation by the Angular components.

I scaffolded a quick project using ng-cli and loaded a component. Let's say that component selector is 'app-component'. This encapsulates all the dom and css pertaining to this component within itself. All good so far.

What I have learned from my previous readings is that components neither allow external CSS to bleed in nor the internal CSS bleed out (this is more specific to web components)

Now, in the index.html file I included a bootstrap css file just to observe whether the styles from bootstrap css bleeds into the component or not and to my surprise it did. I could use all the classes provided the bootstrap css inside my component.

Why is this happening? Essentially external css is bleeding into the component. I understand the view encapsulation concepts in Angular but this doesn't fit in.

Sounds a bit naive, but may be I am missing a point here!

EDIT

Basically I am referring to this:

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

This says:

Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don't leak out and page styles don't bleed in.

External CSS will "bleed in". What could possibly prevent it from doing so? Why did you think it would not? — user663031
– user663031, Commented Mar 28, 2017 at 13:17
You can use bootstrap styles inside your component templates. — Jijo Cleetus
– Jijo Cleetus, Commented Mar 28, 2017 at 13:18
@torazaburo see this developers.google.com/web/fundamentals/getting-started/primers/… — beNerd
– beNerd, Commented Mar 28, 2017 at 13:27
@beNerd That document is a bit confusing; what it is trying to say is that CSS styles of parent components (which it calls "pages") don't bleed in. Of course plain old global CSS rules "bleed in". — user663031
– user663031, Commented Mar 28, 2017 at 13:49

Community · Accepted Answer · 2017-05-23 11:47:23Z

Shadow DOM is not used by default in Angular. By default it emulates via "surrogate ids", per the ViewEncapsulation documentation.

Emulated

Emulate Native scoping of styles by adding an attribute containing surrogate id to the Host Element and pre-processing the style rules provided via ViewMetadata or ViewMetadata, and adding the new Host Element attribute to all selectors.

This is the default option.

To enable Shadow DOM on supported browsers you must use ViewEncapsulation.Native

Native

Use the native encapsulation mechanism of the renderer.

For the DOM this means using Shadow DOM and creating a ShadowRoot for Component's Host Element.

For example:

import { ..., ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss'],
    encapsulation: ViewEncapsulation.Native
})
export class AppComponent ...

In this Working Plunker #1, you'll notice that although global styles have been implemented in both index.html (embedded) and style.css, and an overriding style (with higher specificity) has been implemented in the parent, these do not bleed into the child when ViewEncapsulation.Native is enabled.

Note: I made the assumption that you're not using ViewEncapsulation.Native since it was not mentioned in the original question.

Specific selectors (class or id) are not carried down (as expected), although more "general" styles are. For example a font-family applied to body will bleed into the child (if the child does not override it) as I now understand that torazaburo was alluding to in his answer.

Working Plunker #2

user663031 · Accepted Answer · 2017-03-28 13:50:55Z

1

Style rules don't leak out and page styles don't bleed in.

This is a written a bit confusingly. What it is trying to say is that CSS styles of parent components (which it calls "pages") don't bleed in. Of course plain old global CSS rules "bleed in". They could hardly be prevented from doing so, since they are outside of Angular's control.

answered Mar 28, 2017 at 13:50

user663031

3 Comments

Steve G Over a year ago

Not judging, just asking... Are you sure about this? My [admittedly unscientific and hastily created] test shows that global styles do not bleed in when ViewEncapsulation.Native (Shadow DOM) is enabled. Although, I could be missing your point entirely. Just trying to learn, too. ;)

Steve G Over a year ago

For example: This plunker has Global styles embedded in index.html, styles.css, and the parent component. All of which have a higher level of specificity than the child's CSS, although the child's is the only one applied when Shadow DOM is enabled. (Not overriden, but applied.) plnkr.co/edit/dI8GSsNQvZ8o8hPrOCWT?p=preview

beNerd Over a year ago

Actually that makes perfect sense. I was also a bit skeptical and switched to native shadow dom and found that styles indeed doesn't bleed in. It's a good learning :)

Abdul Rehman · Accepted Answer · 2020-05-18 11:22:53Z

1

The latest why to style the is to override the style.css with app-child before it. e.g

<app-selector> .mat-tab-active {
/** Your Style **/
}

When I used encapsulation it effects on whole application not on the single component that I only want to style.

answered May 18, 2020 at 11:22

Abdul Rehman

473 bronze badges

Collectives™ on Stack Overflow

css encapsulation in Angular

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related