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.
Shadow DOM is not used by default in Angular. By default it emulates via "surrogate ids", per the ViewEncapsulation documentation.
Emulated
Emulate
Nativescoping 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.
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.
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.