Proof of concept / strategy decision: _has*Slot boolean slot convenience variable approach.

[damontgomery]

We can set (and do in some current components) variables to indicate if a slot has content. We can then use these in other methods like render() to hide / show / etc.

What is the best way to handle this so that the variables are updated when slots are updated?

When slots are changed, they emit a slotchange event.

References

Shoelace has an example of this: https://github.com/shoelace-style/shoelace/blob/next/src/components/button/button.ts

We have an alternative that doesn't update when slots change: https://github.com/phase2/outline/blob/next/src/components/base/outline-image/outline-image.ts

[damontgomery]

I think it makes sense to use the Shoelace pattern.

An alternative is to do the query instead of the variable. The drawback there is that it's a little more verbose in the place of use, but less verbose overall.

Inline

render(): TemplateResult {
  return html`
    <div>
      ${this.querySelector('[slot="outline-modal--header"]') !== null
        ? "We have a header."
        : "We don't have a header."
      }
    </div>
    <div id="header">
      <slot
        id="title"
        name="outline-modal--header"
      ></slot>
    </div>
  `;
}

Methods

connectedCallback() {
  super.connectedCallback();
  this._handleSlotChange();
}

private _handleSlotChange(): void {
  this._hasHeaderSlot =
    this.querySelector('[slot="outline-modal--header"]') !== null;
}

render(): TemplateResult {
  return html`
    <div>
      ${this._hasHeaderSlot ? "We have a header." : "We don't have a header."}
    </div>
    <div id="header">
      <slot
        id="title"
        name="outline-modal--header"
        @slotchange="${this._handleSlotChange}"
      ></slot>
    </div>
  `;
}

[damontgomery]

I think with the inline-only approach, you still need to watch for slotchange.

I was able to use this pattern:

${this.querySelector('[slot="outline-modal--header"]') !== null
  ? "We have a header."
  : "We don't have a header."
}
<slot name="outline-modal--header" @slotchange="${() => this.requestUpdate()}"></slot>

So, these are related. You need to handle slotchange no matter what. The this.querySelector() !== null evaluates on each update and it pretty explicit, but needs to be duplicated if used in multiple places. The variable requires a bunch of scaffolding.

[damontgomery]

I've settled on the inline pattern. We use #126 to handle slot changes.

If you are re-using the conditional check, you can define a const inside the render method, but I rarely do that.