Почему стили AppComponent распространяются на \ других компонентов?

Question

[Angularity]

AppComponent (HTML)

<header>
    <div class="router">
        <router-outlet></router-outlet>
    </div>
</header>

`

AppComponent (CSS)

header {
    text-align: justify;
    letter-spacing: 1px;
    height: 8em;
    padding: 2em 10%;
    background: deepskyblue;
    color: black;
}

Почему в другом компоненте на тег h1 распространяется "color: black" ?

Answer 1

[Николай Болотников]

color является наследуемым свойством. В данном примере div.router является дочерним элементом, поэтому он получает вычисленное значение этого свойства от его родителя (header).