html - Angular Tags disrupting CSS stylings -

i have project being built angular 2 framework. custom angular tags (<my-app>, <my-whatever-component> etc.) keep disrupting css output. when html directly on index.html file (not in component whatsoever) css loads alright.

i have debugged , have come conclusion custom angular tags cause of issue.

what do change behavior? how can make custom html tags vanish after view rendered ? prevent hierarchical css rules breaking.

edit 1 : forgot mention css custom (free bootstrap admin template thingy) can't (more don't want to) tweak it.

you need set view encapsulation types, more information here

@component({    moduleid: module.id,    selector: 'my-zippy',    templateurl: 'my-zippy.component.html',    styles: [`     .zippy {       background: green;     }    `],    encapsulation: viewencapsulation.none //no shadow dom @ all. therefore, no style encapsulation. }) 

edit

as workaround can use attribute selector in component like

selector: '[my-component]' 

and use like

<div my-component>hello component</div> 

this way can skip component tags html , can apply hierarchical css.

please up-vote if find useful.