Stenciljs how to check if slot is empty?

Question

How can i check if slot have value or is empty?

Here is my code:

  <div>
    <slot name="info"></slot>
  </div>

Here is pseudo code of what i need:

<div>

<slot name="info"></slot>

{this.info == null ? <p> No informations </p> : <p> {this.info.value} </p>}

</div>

Answer 1

You can get a reference to the host element of the component

@Element() hostElement: HTMLStencilElement;

and query for your slot as

this.hostElement.querySelector('[slot="slot1"]');

If it is falsy, it is not present