StencilJS: Optional <slot /> element doesn’t work in IE11/Edge

Question

I wrote a web component with StencilJS.

A slotted element should only be rendered in a specific case. So there is a optional element.

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

The call of the web component is the following:

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

This doesn't work in Microsoft Edge und IE11. For Chrome and Firefox everything is fine.

I know slot's are not supported: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot#Browser_compatibility

But apparently there are some polyfills in stenciljs.

Chrome:

IE11:

Are there any experiences about that topic?

Answer 1

As a workaround, instead of making the slot conditional (which IE won't respect), hide the slot conditionally:

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