How to tell if slot is filled

[alexgagnon]

Hi all, first time using Lit. I'm trying to return a different HTML structure depending on if a slot has been filled, but whenever I try to query how many nodes are in the slot, it's always 0. Here's the class:

// imports ...

export class Alert extends LitElement {
  @property({type: String})
  content: string | undefined = undefined;

  @queryAssignedNodes('heading', true)
  _headingNodes: NodeListOf<HTMLElement>;

  render() {
    return this._headingNodes.length === 0
      ? html`<div><slot><p>${this.content}</p></slot></div>`
      : html`<section><slot name='heading'></slot><slot><p>${this.content}</p></slot></section>`
    }
  }
}

and called like so:

<wc-alert>This is some content</wc-alert>
<wc-alert><h2 slot='heading'>Alert!</h2>This is some more content</wc-alert>

It seems to always have length === 0, but what I'd like is that when the 'heading' slot is filled, the <section /> variant is returned. Thanks!

[aomarks]

The problem you're hitting in your current implementation is that the slot you're checking with this._headingNodes.length never exists, so the count of slotted children will always be 0 (because the queryAssignedNodes decorator defaults to 0 if the slot doesn't exist). The slot doesn't exist on first render because no child DOM exists yet on first render. And actually even if something triggered a subsequent render, the count will still always be 0, because only the default slot could have been rendered, and never the heading slot you're looking for.

Here's a playground which includes a heading slot even in the first case, because otherwise there is no way to check if anything was slotted into it, and adds slotchange listeners to trigger a re-render when the layout needs to change.

If possible though, I'd also suggest modifying this template so that it doesn't require switching the parent element type between <div> and <section>, because doing that requires adding/removing <slot> elements and those event listeners whenever the layout changes, and is more verbose. Here's another playground which toggles an attribute when the layout changes, instead of replacing the entire template. This should be more efficient and fewer bytes than the first example.

If the reason you wanted to switch between <div> and <section> was for semantic ARIA reasons, note that <div role="region" aria-label="My section"> and <section aria-label="My section"> are equivalent, so you could conditionally add those attributes if needed. (<div> and <section> without a label are already equivalent, since neither will have a role).

Also check out WICG/webcomponents#936 for a proposal to add something like :hasSlotted which would allow you to write an equivalent solution to the second example purely in CSS. Give it a thumbs up if you agree!

[alexgagnon]

Thanks @aomarks! So if I understand correctly, on first pass there is no child DOM element created yet so it would register as 0, and then there's nothing to attach an event listener to to update it once the child DOM element would have been created?

And good to know about them behaving the same, I was following our orgs css/style guide but if I can push for just divs (with extra a11y labelling as required) that works.