Почему CSS не совпадает с компонентом селектора Angular 6?

app.html

<app-chat></app-chat>

chat.html

<h1>Hello</h1>

chat.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

chat.css

h1 {
    background-color: #000;
}

Мне нужно знать, почему chat.css не работает в моем браузере. Когда я использовал CSS напрямую, без компонента чата, он работал (как показано ниже).

app.html

<h1>Hello</h1>

app.css

h1 {
    background-color: #000;
}

Так какое же решение?