Окончательный выпуск Angular2 больше не поддерживается: host :: shadow

Question

Сегодня утром я обновился до окончательного релиза Angular2 и заметил, что стили CSS, которые я использовал в предыдущих выпусках, больше не работают. Мне нужно контролировать внешний вид элемента HTML с дочерним компонентом от родителя.

Вот мой HTML:

<div id="intro"> 
     <stm-video [video]="PageData.WelcomeVideo"></stm-video> 
    </div> 

Вот мой CSS:

:host ::shadow 
{ 
    stm-video 
    { 
     .video-container 
     { 
      height: 80vh; 
      width: inherit; 
     } 
    } 
} 

.video-контейнер представляет собой HTML-элемент внутри. Я хочу установить высоту видеоконтейнера, когда он загружен на родительскую страницу. Это использовалось для работы в Angular2 RC 4 и 5. Остановившись сегодня после установки окончательной версии Angular2.

Есть ли более подходящий способ справиться с этим?

Answer 1

:host по-прежнему поддерживается. ::shadow не поддерживается. Насколько я знаю, этого никогда не было. ::content игнорируется. /deep/ и >>> эквивалентны и оба поддерживаются.

:host >>> { 
    stm-video { 
    ... 

должно делать то, что вы хотите.

Смотрите также Custom Styling on <ng-content> in angular2 not working ?

Answer 2

Я думаю, что вы ищете здесь /deep/. Он применяет стили вниз через дочерние компоненты. В ваших родительских стилях у вас будет.

/deep/ .video-container 
{ 
    height: 80vh; 
    width: inherit; 
} 

Answer 3

Спасибо Гюнтер и Клинт. С вашими предложениями, вот что я прибыл в для решения этой проблемы (с помощью LESS для создания CSS):

@deep: ~">>>"; 

:host 
{ 
    stm-video 
    { 
     @{deep} 
     { 
      .video-container 
      { 
       height: 80vh; 
       width: inherit; 
      } 
     } 
    } 
} 

имея @ {глубоко} непосредственно под: хозяин влияет на все дочерние узлы, но положить его внутри дочернего элемента просто влияет на стили внутри этого дочернего узла (stm-video).