Stenciljs如何检查插槽是否为空？

Question

如何检查插槽是否有值或是否为空？

这是我的代码：

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

这是我需要的伪代码：

<div>

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

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

</div>

Answer 1

您可以获得对组件宿主元素的引用

@Element() hostElement: HTMLStencilElement;

并查询您的广告位

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

如果为假，则不存在

Stenciljs how to check if slot is empty?