StencilJS: Optional element doesn’t work in IE11/Edge

Question

I wrote a web component with StencilJS.

A slotted element should only be rendered in a specific case. So there is a optional element.

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

The call of the web component is the following:

<my-test>
   <div slot="title">This is a test</div>
   <div slot="content">123</div>
</my-test>

This doesn't work in Microsoft Edge und IE11. For Chrome and Firefox everything is fine.

But apparently there are some polyfills in stenciljs.

Chrome:

IE11:

Are there any experiences about that topic?

Which polyfills you are talking about? Also let us know, How did you implemented it? If there is any link than try to provide us. It can give better idea. If we talk generally than you should use any other alternative for slot in IE & Edge as it is not supported. You can use CSS & JS to hide specific element. — Deepak-MSFT, May 06 '19 at 13:48
@Deepak-MSFT: The question is about StencilJS. Yes, slots are not supported by IE11 natively, but Stencil can emulate them through polyfills. — lxg, May 06 '19 at 17:00
That's what we need to know that which polyfill he is using and how did he used it in his code to replicate the issue and to check whether is there any issue with IE or polyfill. — Deepak-MSFT, May 07 '19 at 07:45
I think that are the polyfills of stenciljs. Maybe it is a bug. I'll open an issue on stencils github page. — JV3, May 07 '19 at 10:24
I don't think the problem is the template logic. In IE11, if you include anything inside the Stencil component element, it shows up, even if you use an undefined slot name or have no slots defined at all. (I'm running Stencil 0.18.1.) — G. Tranter, May 07 '19 at 19:48
@JV3, Is there any status update for the issue? If yes, please try to update us with latest information. We will try to provide further suggestions. thanks for your understanding. — Deepak-MSFT, May 13 '19 at 08:10

score 3 · Answer 1 · answered May 08 '19 at 14:01

3

As a workaround, instead of making the slot conditional (which IE won't respect), hide the slot conditionally:

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

answered May 08 '19 at 14:01

G. Tranter

1 Answers1