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

Question

如何检查slot是否有值或为空?

下面是我的代码:

<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"]');

如果为false，则不存在