html - StencilJS：可选元素在 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 中有一些 polyfill。

铬合金：

IE11：

有没有关于该主题的经验？

标签： htmlinternet-explorermicrosoft-edgeweb-componentstenciljs

Answer 1

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

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