StencilJS：可选的<slot>元素在IE11 / Edge中不起作用

Question

我用StencilJS编写了一个Web组件。

仅在特定情况下才应显示带槽元素。因此，有一个可选元素。

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

Web组件的调用如下：

<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中有一些polyfills。

Chrome：

IE11：

关于该主题是否有任何经验？

Answer 1

作为一种解决方法，不要有条件地限制插槽（IE不会遵守），而是有条件地隐藏插槽：

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