Не работает CSS псевдокласс :host-context

Question

Никак не могу заставить работать CSS псевдокласс :host-context.

Если я верно понял принцип его работы - то нужно просто указать селектор родителя, необходимого для активации указанных стилей, но, видимо, что-то делаю не так. Как заставить демку ниже работать?

В данном примере я хочу добиться того чтобы блоки с классом .child меняли свой background-color в зависимости от класса родителя. Подскажите пожалуйста, что я делаю не так.

Спасибо!

.child {
  min-width: 230px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  display: inline-block;
  padding: 12px;
  border: 3px solid #232323;
  ;
}

:host-context(.blue-parent) .child {
  background-color: cornflowerblue;
}

:host-context(.green-parent) .child {
  background-color: lightgreen;
}

<div class="blue-parent">
  <div class="child">Должен стать синим</div>
</div>

<br>

<div class="green-parent">
  <div class="child">Должен стать зелёным</div>
</div>

Answer 1

Все в разы проще, достаточно воспользоваться значением inherit:

.blue-parent {
  background-color: cornflowerblue;
}

.green-parent {
  background-color: lightgreen;
}

.child {
  background-color: inherit;
}

<div class="blue-parent">
  <div class="child">Должен стать синим</div>
</div>

<br>

<div class="green-parent">
  <div class="child">Должен стать зелёным</div>
</div>

Цитата с MDN касательно того почему не срабатывает host-context:

host-context не имеет влияния когда используется за пределами shadow DOM

Автору вопроса удалось воспользоваться данным свойством на Angular версии 10:

Zdarova: Оказалось что :host-context в Angular вполне себе работает.

Vasily: Спасибо за полезную информацию, на какой версии тестировали?

Zdarova: Тестировал на 10й версии, там завелось.

БЛОГ НА HUSL

Не работает CSS псевдокласс :host-context

Ответы (1 шт):