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

【问题标题】：StencilJS: Optional <slot /> element doesn’t work in IE11/EdgeStencilJS：可选的 <slot /> 元素在 IE11/Edge 中不起作用
【发布时间】：2019-05-08 22:01:23
【问题描述】：

我用 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：

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

【问题讨论】：

你在说哪些 polyfill？也让我们知道，你是如何实现它的？如果有任何链接，请尝试提供给我们。它可以提供更好的想法。如果我们谈论一般性，那么您应该在 IE 和 Edge 中使用任何其他替代插槽，因为它不受支持。您可以使用 CSS & JS 隐藏特定元素。
@Deepak-MSFT：问题是关于 StencilJS。是的，IE11 本身不支持插槽，但 Stencil 可以通过 polyfill 模拟它们。
这就是我们需要知道他正在使用哪种 polyfill 以及他如何在代码中使用它来复制问题并检查 IE 或 polyfill 是否存在任何问题。
我认为这是 stenciljs 的 polyfills。也许这是一个错误。我将在 stencils github 页面上打开一个问题。
我认为问题不在于模板逻辑。在 IE11 中，如果您在 Stencil 组件元素中包含任何内容，即使您使用未定义的插槽名称或根本没有定义插槽，它也会显示出来。（我正在运行 Stencil 0.18.1。）

标签： html internet-explorer microsoft-edge web-component stenciljs

【解决方案1】：

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

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

【讨论】：