Angular 2 css styles leaking out of component

Question

Plunker with the problem I'm having. "If you comment out the styles in the ThirdComponent you can see it affect the parent and sibling components' styles." – adriancarriger (Thank you Adrian)

In my component I'm using...

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 call this one. I only need the style in this one component. I thought Angular 2 components were totally independent, can't figure out why this one changes my whole web app.

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";

Same results if I do it this way:

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

View encapsulation in regards of component styles works by extending your existing selectors with a custom attribute added by angular.

Example:

The host element becomes <my-thrid-component _nghost-dra-1>.
All its children become e.g. <h3 _ngcontent-dra-1>.

Angular now takes your css selectors and extends them:

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

Now back to the extending your existing selectors part.
When you @import an external file, its content is not fetched - the file will be loaded as an external resource and therefore angular can not modify it.

Taking a look at the generated style tag, reveals, what's actually happening:

<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: There is no such thing as nested imports, therefore imported styles are applied globally. If your really want to include the styles only for a specific component, you need to have them locally available, so angular can read its content and extend the selectors.