Nested components with conditional slots

[canastro]

Stencil version:

 @stencil/core@0.1.1-0

I'm submitting a:

• bug report
• feature request
• support request

Current behavior:
When using multiple nested components with slots in them, if one of the slots is not rendered, the inner component is still rendered.

Expected behavior:
The inner component should not be rendered

Steps to reproduce:
Have multiple components with slots nested, in one of the middle components do not render the slot with a if clause, i.e. return (<div><h1>Hello</h1>{false && <slot/>}</div>)

Related code:

<micro-header>
  <micro-menu apps={apps}>
    <micro-user />
  </micro-menu>
</micro-header>

<micro-header> has a slot where <micro-menu> is rendered. <micro-menu> has a slot where <micro-user> is rendered.

the render function of <micro-menu> returns the following:

return (
      <div>
        <div class="micro-hamburger" onClick={this.handleHamburgerClick}>
          <i class="material-icons">dehaze</i>
        </div>
        {this.visible && ([
          <div class="micro-menu">
            <ul>
              {this.apps.map(app => <li>{app.name}</li>)}
            </ul>
            <slot />
          </div>,
          <micro-backdrop onClick={this.handleBackdropClick} />
        ])}
      </div>
    );

visible is false by default. But currently the micro-user component is rendered even before the visible flag is set to true. It seems that it always tries to render enclosed components wether it finds the slot or not. if it does not find a <slot> it just renders in the root of the upper component.

Other information:

[jgw96]

Hey @canastro , would you be able to provide a simple repo I could use to reproduce this issue? I can't seem to reproduce it locally with the latest release.

[jgw96]

Oh, and thanks for opening an issue with us!

[canastro]

Hello @jgw96,

Here is a sample repo: https://github.com/canastro/stencil-slot-issue

This is my index.html:

<comp-a>
    <comp-b>
      <comp-c />
    </comp-b>
  </comp-a>

But in comp-b the <slot> should not be rendered because the isVisible flag is initialised as false.

I'm available on stencil's slack if you need anything.

[jgw96]

Hey @canastro , alright I can now repro this issue. Just discussed it with one of my teammates and were not sure if we want to allow conditionally renderings <slot></slot> elements. Going to have some further discussion, but at the moment I'm going to put this one on hold. Ill update here tomorrow. Thanks for using Stencil!

[jgw96]

Hello all! Discussed this with the team further this morning and we decided we are not going to support this functionality as described in this issue for now. However, native slot (in Shadow Dom) does support the concept of rendering default content if nothing is put into the slot. We do plan on adding this functionality to our custom slot but if you would like to use it now you can do @Component({ tag: 'my-app', styleUrl: 'my-app.scss', shadow: true }) to turn on shadow dom and therefore use native slot. Note, this means that your default content will only work in browsers that support shadow dom (Chrome, Safari and most Chrome based browsers). Because we are not planning to add conditional rendering of slots, I am going to close this issue for now. Thanks for using Stencil!

[jgiordano-rms]

This issue makes render props with slots nearly impossible. Im still working on finding a workaround to this, but this really needs to be a feature since the need slots in render props or conditionals could be extremely helpful.

[k1laba]

would be great if team adds support of this feature. We can still do it with some workarounds but code would look much cleaner with this feature

[JCKodel]

Faced this issue today.

A good framework implements a "community discussion" before the "team discussion" (meaning: we need this, we're asking for this, and you need us, don't ever forget this >=) )