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

铬合金：

IE11:

有关于该主题的经验吗？

Answer 1

作为解决方法，不要使槽成为有条件的（IE 不会尊重），而是有条件地隐藏槽：

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