Стилизация n-го потомка с хост-контекстом в угловом

Question

Я создаю пользовательский компонент-тостер, используя ngx-toastr. Для пользовательского компонента у меня нет доступа к контейнеру тостера. Все созданные тосты необходимо сложить в контейнер для тостеров. Тосты выровнены по верхнему правому углу (через свойство top css). Я разработал стиль контейнера тостера, используя контекст хоста, так как он недоступен в пользовательском компоненте и поступает из библиотеки.

Работает хорошо, но проблема возникает, когда есть несколько тостов. Поскольку они основаны на стиле хост-контекста, все тосты будут иметь одинаковое значение для свойства top-css.

Скажите, если высота каждого тоста составляет 40px, я не могу настроить верхнее значение на основе свойства nth-child w.r.t host-context. Кто-нибудь сталкивался с подобной проблемой? Любая помощь приветствуется.

:host-context(.toast-top-right.toast-container):nth-child{
    top: calc(66 + ( n * 40))px; 
    right: 12px;
}

Пожалуйста, найдите иллюстрацию здесь https://stackblitz.com/edit/angular-t7ancy Попробуйте нажать на тест несколько раз, обратите внимание на элементы div, созданные внутри 'overlay-container'

Answer 1

@ август Предложение помогло. Это больше связано с положением собственности. Я решил это, как показано ниже

:host-context(.toast-container){
    pointer-events: none;
    position: fixed;
    z-index: 999999;
  }
  :host(.toast-success){
    border-left-color: #51A351;   
    position:relative
  }

Answer 2

Вместо позиционирования каждого тостера сверху: 66px вправо: 12px, я бы позиционировал .toast-container и позволил бы всем элементам тостера перемещаться в режиме блока по умолчанию.

.toast-container {
    position: fixed;
    top: 66px;
    right: 12px;
}

.toast[_nghost-c2] {
    position: relative;
}

Похоже, определения css из toastr.component.scss не применяются таким образом. Чтобы применить определения CSS, я сделал следующее:

encapsulation: ViewEncapsulation.None,

https://stackblitz.com/edit/angular-vkefn9?file=src%2Fcustom-toastr%2Ftoastr.component.ts