Как решить проблему с кроссбраузерностью при применении модификаторов компонентов angular5 в IE10+?

Question

[Пащук Илья]

Добрый день всем, ребята столкнулся с таким вопросом по кросбраузерности верстки компонентов приложения на Angular 5, не срабатывают модификаторы для компонента в IE11
верстка модификатора:

:host(.--green button) {
  color: white;

  background-color: $clPrimarySecond;
  border-color: $clPrimaryThird;

  &:hover {
    background-color: $clPrimaryThird;
  }

  &:active {
    border-top-color: $clPrimaryThird !important;
    border-left-color: $clPrimaryThird !important;
  }

  /* Includes Themes Styles  */
  @include mail-theme($themes) {
    background-color: use('clPrimaryMain');
    border-color: use('clPrimaryThird');

    &:hover {
      background-color: use('clPrimaryThird');
    }

    &:active {
      border-top-color: use('clPrimaryThird') !important;
      border-left-color: use('clPrimaryThird') !important;
    }
  }
  /* themes end*/
}

пробывал разные варианты типа:

:host {
&.--green button {}
}
//----
:host(.--green) button{}
//----
:host-context(.--green) button{}

Должно быть так скрин с еджа prntscr.com/jr1y1l, скин с ИЕ prntscr.com/jr201h
Вообщем не срабатывает, если кто то сталкивался подскажите плиз в какую сторону смотреть, буду рад любому совету, за ранее спасибо!

Comments

[Дмитрий Лузанов]

Давно сталкивался. ИЕ просто не понимает классы, начинающиеся с двойной черты. Попробуйте экранировать.

[Пащук Илья]

Внатуре упустил момент, блин все надо как то фиксить

[Пащук Илья]

ребята может есть какой то полифил для ие чтобы не писать самому или не менять нейминг модификаторов?