Css encapsulation in Angular

Question

I recently studied css and dom encapsulation using Angular components.

I started a quick project using ng-cli and downloaded the component. Let's say that the component selector is a "component application." This encapsulates all dom and css related to this component internally. All is good so far.

What I learned from my previous readings is that the components do not allow external CSS to flush, and the internal CSS does not stand out (this is more specific for web components).

Now, in the index.html file, I included the bootstrap css file to check if the styles are erased from bootstrap css to the component or not, and, to my surprise, this happened. I could use all the classes provided by bootstrap css inside my component.

Why is this happening? Essentially external css bleeds into the component. I understand the concept of encapsulating a view in Angular, but that doesn't work.

It sounds a bit naive, but maybe I'm missing a point here!

EDIT

Basically, I mean the following:

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

It says:

Scoped CSS : CSS defined inside the shadow DOM is bound to it. Style rules do not leak, and page styles do not merge.

Answer 1

Shadow DOM Angular. " ", ViewEncapsulation.

Native - , ViewMetadata ViewMetadata, Host Element .

.

Shadow DOM , ViewEncapsulation.Native

Native

.

DOM Shadow DOM ShadowRoot .

:

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

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

Working Plunker # 1 , index.html (embedded), style.css, ( ), , ViewEncapsulation.Native.

. , ViewEncapsulation.Native, .

( ) ( ), "" . , a font-family, body, child ( ), , .

Plunker # 2

Answer 2

, .

. , , , CSS ( "" ) . , CSS "". , Angular.