Search code examples
ionic-frameworkweb-componentstenciljs

Stencil.js renders slot content, event if the render() returns null

I have a Stencil.JS components:

import {Component, Prop, h} from '@stencil/core';

@Component({
   tag: 'my-comp',
   styleUrl: 'my-comp.css',
   // shadow: true
})

export class MyComp {
   @Prop() active: boolean = false;
   render() {
      return this.active ? <div>
         <slot></slot>
      </div> : null;
   }
}

I expect that content of the slot is not rendering when I use the component in this manner:

<my-comp>
   <p>I'm hidden!</p>
</my-comp>

And, actually it works as expected, when "shadow" set to true in Component decorator. But, when the shadow DOM is disabled, component shows the content of slot regardless of the value of this.active.

I have a feeling that I don't understand how the render works with slots. Could you please explain it to me? I would really appreciate If you know how to work-around this issue without hiding the slot content programatically.

Solution

  • See the documentation:
    https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

    SLOT elements can only be used in shadowDOM, when used in lightDOM (or any DOM) they are unknown tags thus display the contents