javascript - css encapsulation in Angular -

i have been exploring css , dom encapsulation angular components.

i scaffolded quick project using ng-cli , loaded component. let's component selector 'app-component'. encapsulates dom , css pertaining component within itself. far.

what have learned previous readings components neither allow external css bleed in nor internal css bleed out (this more specific web components)

now, in index.html file included bootstrap css file observe whether styles bootstrap css bleeds component or not , surprise did. use classes provided bootstrap css inside component.

why happening? external css bleeding component. understand view encapsulation concepts in angular doesn't fit in.

sounds bit naive, may missing point here!

edit

basically referring this:

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

this says:

scoped css: css defined inside shadow dom scoped it. style rules don't leak out , page styles don't bleed in.

shadow dom not used default in angular. default emulates via "surrogate ids", per viewencapsulation documentation.

emulated

emulate native scoping of styles adding attribute containing surrogate id host element , pre-processing style rules provided via viewmetadata or viewmetadata, , adding new host element attribute selectors.

this default option.

to enable shadow dom on supported browsers must use viewencapsulation.native

native

use native encapsulation mechanism of renderer.

for dom this means using shadow dom , creating shadowroot component's host element.

for example:

import { ..., viewencapsulation } '@angular/core';  @component({     selector: 'my-component',     templateurl: './my.component.html',     styleurls: ['./my.component.scss'],     encapsulation: viewencapsulation.native }) export class appcomponent ... 

in working plunker #1, you'll notice although global styles have been implemented in both index.html (embedded) , style.css, , overriding style (with higher specificity) has been implemented in parent, these not bleed child when viewencapsulation.native enabled.

note: made assumption you're not using viewencapsulation.native since not mentioned in original question.

specific selectors (class or id) not carried down (as expected), although more "general" styles are. example font-family applied body bleed child (if child not override it) understand torazaburo alluding in answer.

working plunker #2