StencilJS: опциональноэлемент не работает в IE11 / Edge

Question

Я написал веб-компонент с помощью StencilJS.

Элемент с прорезями должен отображаться только в конкретном случае. Так что есть необязательный элемент.

<div>
  <slot name="title"/>
    {this.active && (<slot name="content"/>)}
</div>

Вызов веб-компонента следующий:

<my-test>
   <div slot="title">This is a test</div>
   <div slot="content">123</div>
</my-test>

Это не работает в Microsoft Edge и IE11. Для Chrome и Firefox все хорошо.

Я знаю, что слоты не поддерживаются: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot#Browser_compatibility

Но, очевидно, в stenciljs есть несколько заполнителей.

Chrome:

IE11:

Есть ли опыт по этой теме?

Answer 1

В качестве обходного пути, вместо того, чтобы сделать слот условным (что IE не будет уважать), скрыть слот условно:

<div>
  <slot name="title"/>
  <div style={!this.active && { 'display': 'none' }}>
    <slot name="content"/>
  </div>
</div>