Сделайте что-нибудь, когда у слота нет дочерних узлов в lit-html

Question

Я хотел бы отобразить текст, когда в слоте нет содержимого.

class List extends LitElement {
  public render() {
    return slot.length === 0 
      ? html`No content is available`
      : html`<slot></slot>`;
  }
}

Answer 1

Я думаю, что это может помочь:

render() {
   return html` <slot id="slot">No content is available</slot> 

`;}

firstUpdated(){
      const slot = this.shadowRoot.querySelector("#slot");
      this.slt = slot.assignedNodes();
      if (this.slt.length===0){
        console.log('No content is available')
      } else {
        console.log('Content available', this.slt)
      }
}

Вы не можете назначить узлы слота, если вы не визуализируете элемент слота.Вот почему сначала вам нужно сделать это.Ведь есть много способов это скрыть.Другой способ - определить его у его родителей и передать номер элемента слота в качестве свойства.

Демо