StencilJS проверяет, является ли указанный слот пустым

Question

У меня есть компонент stencilJS с двумя именованными слотами. Есть ли способ определить, были ли слоты назначены значения? Например, фрагмент кода ниже показывает именованные слоты для « logo » и « menu ». Как я могу проверить внутри компонента, если оба названных слота не пусты? В идеале я хочу проверить изнутри компонента и во время componentWillMount (). Спасибо.

  <koi-menu breakpoint="768" userToggled="false">
      <div class="logo__header " slot="logo"><img src="assets/images/logo.png" /></div>

      <ul class="nav__wrapper list mw8-ns center-m" slot="menu">
        <li class="nav__listitem"><a class="ttu nav__link" href="???">Why Live Grit</a></li>
        <li class="nav__listitem"><a class="ttu nav__link" href="???">Clients</a></li>
        <li class="nav__listitem"><a class="ttu nav__link" href="???">Our Programs</a></li>
        <li class="nav__listitem"><a class="ttu nav__link" href="???">Our Story</a></li>
      </ul>

  </koi-menu>

Answer 1

Использование слота можно определить по элементу хоста в функции componentWillLoad ():

hasLogoSlot: boolean;
hasMenuSlot: boolean;

@Element() hostElement: HTMLStencilElement;

componentWillLoad() {
    this.hasLogoSlot = !!this.hostElement.querySelector('[slot="logo"]');
    this.hasMenuSlot = !!this.hostElement.querySelector('[slot="menu"]');
}