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

Question

我用 StencilJS 写了一个网络组件。

开槽元素只应在特定情况下呈现。所以有一个可选元素。

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

Chrome :

IE11:

是否有关于该主题的经验？

Answer 1

作为变通方法，不是使插槽有条件(IE 不会尊重)，而是有条件地隐藏插槽:

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