Angular 2 css styles derived from component

Question

Plunker with a problem that I encountered. "If you comment on the styles in ThirdComponent, you can see how this affects the parent and component styles for the sisters." - adriancarriger (Thanks, Adrian)

In my component I use ...

styles: [' @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"; '] 

but it seems to ruin the style of any component that causes this. I only need style in this one component. I thought that Angular 2 components were completely independent, they can’t understand why this changes my whole web application.

component:

 import { Component, OnInit } from '@angular/core'; import datetimepicker from 'eonasdan-bootstrap-datetimepicker'; import moment from 'moment'; @Component({ selector: 'date-time-picker', styleUrls: ['../../../css/datetimepicker.css'], template:` <div class="input-group"> <input class="form-control" a2e-datetimepicker [date]="date" [options]="a2eOptions" (onChange)="dateChange($event)" (onClick)="dateClick()" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> ` }) export class DateTimePicker implements OnInit { date: moment.Moment; a2eOptions: any; dateChange(date) { this.date = date; } dateClick() { console.log('click click!') } getTime() { alert('Selected time is:' + this.date); }; addTime(val, selector) { this.date = moment(this.date.add(val, selector)); }; clearTime() { this.date = null; }; constructor(){ this.date = moment(); this.a2eOptions = { format: 'dddd, MMMM Do YYYY, h:mm a', //sideBySide: true, stepping: 5 }; } ngOnInit(): void { console.log(datetimepicker); } } 

datetimepicker.css

 @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"; 

The same results if I do it as follows:

 template:` <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"> 

Using systemJS

Answer 1

Viewing encapsulations regarding component styles works by extending existing selectors with a custom attribute added by angular.

Example:

The host element becomes <my-thrid-component _nghost-dra-1> .
All his children become, for example, <h3 _ngcontent-dra-1> .

Angular now accepts your css selectors and extends them:

h3 { ... } becomes h3[_ngcontent-dra-1] { ... } , so your styles only apply to elements of the component itself.

Now back to expanding the existing part of the selectors.
When you @import an external file, its contents are not loaded - the file will be loaded as an external resource, and therefore angular cannot change it.

A look at the generated style tag shows what actually happens:

 <style> @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; @import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"; h1[_ngcontent-dra-1], h2[_ngcontent-dra-1], h3[_ngcontent-dra-1] { background: red; } </style> 

Conclusion Nested imports do not exist, so imported styles are applied globally . If you really want to include styles only for a specific component, you must have them locally available, so angular can read its contents and extend the selector.