Меньшее расширение не работает с Angular: host

Question

У меня есть угловой компонент:

export class HeaderMainComponent { }

С HTML:

<header>
  Some content
</header>

И МЕНЬШЕ стилей:

:host(.dark) {
  header { 
    &:extend(.dark all); 
  }
}

header {
  &.dark {
    background-color: black;
  }
}

Я использую компонент как:

<header-main class="dark"></header-main>

Предыдущий код LESS не применяет черный фон к тегу HTML заголовка.

Я могу заставить его работать, только если использую следующее:

:host(.dark) {
  header { 
    background-color: black;
  }
}

header { }

Почему LESS extend не работает с Angular :host?

Я что-то упустил?

Answer 1

Вот код, который работал для вас:

:host(.dark) {
  header { 
     background-color: black;
  }
 }

header { }

Вот измененный код, который не работал для вас:

:host(.dark) header {
  &:extend(.dark all); 
}    

&.dark {
  background-color: black;
}

Вот вывод, который одинаков дляоба.