How to conditionally render slotted content

[steve2507]

Is there a way to prevent a component from rendering, if a parent component decides it's not the time yet? I am not just talking about visual rendering, but the goal is to have the element completely ignored.

As an example, for dialogs I would like to only render the contents when the given dialog is visible/opened.
Here's what such a dialog could look like;

<some-dialog
  ?opened=${false}
>
  <some-other-element>
    I am doing async stuff, so please don't actually render me unless some-dialog is open.
  </some-other-element>
</some-dialog>

So far what I have found, even when you remove the slot element (within some-dialog in this example) from the parent, any given child components will still be called/rendered (even though they remain invisible).
This is problematic, because some of those elements make API requests. And those are wasted as the dialog may never be opened.

To be specific, the following implementation for some-dialog does not solve this;

class SomeDialog {
  static properties = {
    opened: { type: Boolean, reflect: true },
  };

  render() {
    if (!this.opened) {
      return ''; // slot may be gone, but any childs are still 'called' or 'rendered'
    }

    return html`
      <slot></slot>
    `;
  }
}

Is there a (natural) way to do this?
Solutions that work but are not 'pretty';

• Pass a similar opened param to the some-other-element, but that would make it opinionated and awkward to work with outside a dialog context.
• Add a renderContents property or similar to some-dialog where the contents to be rendered are passed in, but that's far from pretty, and on top of that breaks styling encapsulation. Eg the selector some-dialog > some-other-element will not work anymore unless the renderRoot of some-dialog is overridden.

Thanks for any input!

[justinfagnani]

Slotted elements belong to the outer scope of a host with a shadow root, so their connected-ness isn't controlled by the host, it's controlled by whatever put them there. Like you noted, removing the slot doesn't remove the element.

Since the slot is an implementation detail of the host, this DOM:

<some-dialog>
  <some-other-element></some-other-element>
</some-dialog>

...doesn't change regardless of the presence of slots in <some-dialog>.

This is the same for a native detail element. The content is not detached, it's just not rendered. If you want to know when the content is displayed, you can listen for the toggle event.

I think there are two (maybe 3) main ways to handle this:

1. Conditionally render the element:

html`
  <some-dialog .opened=${opened}>
    ${opened
      ? html`
        <some-other-element>
          I am doing async stuff, so please don't actually render me unless some-dialog is open.
        </some-other-element>`
      : nothing}
  </some-dialog>
`

2. Make the element disable-able:

html`
  <some-dialog .opened=${opened}>
    <some-other-element ?disabled=${!opened}>
      I am doing async stuff, so please don't actually render me unless some-dialog is open.
    </some-other-element>
  </some-dialog>
`

3. IntersectionObserver

I haven't tried this myself, but IntersectionObserver may be able to tell if the element is displayed. This would help not make API calls when the element is offscreen too.

[steve2507]

Thank you for those details. For some reason I did not think of the conditional rendering as you described (option 1). That's probably because I am actually looking at tabs right now which are a little bit more finicky to implement that way.

The IntersectionObserver I use elsewhere for the exact reason you describe, and indeed maybe I'll go that way here as well.

Thank you for your detailed answer and the awesome work on this project!

[steve2507]

Just to confirm; IntersectionObserver indeed works for this usecase.

[filimon-danopoulos-stratsys]

To add to this one option might be to have the content in a <template> instead as they technically do exactly what you want them to.

<some-dialog
  ?opened=${false}
>
  <template>
    <some-other-element>
      I am doing async stuff, so please don't actually render me unless some-dialog is open.
    </some-other-element>
  </template>
</some-dialog>

The drawback of such an approach would be that you would have to render them manually. Depending a bit on what content you have you will probably have to render to the component itself and have an additional slot.

class SomeDialog {
  static properties = {
    opened: { type: Boolean, reflect: true },
  };

  render() {
    return html`
      <slot></slot>
      <slot name="instance"></slot>
    `;
  }
  
  updated(changed) {
    if (changed.has('open')) {
      if (this.open) {
        const $slot = this.shadowDom.querySelector('slot:not([name])')
        const $template = $slot.assignedNodes().find(node => node.nodeName === 'TEMPLATE')
        if ($template) {
          // Single child for the example, could also be multiple nodes.
          const $clone = $template.content.cloneNode(true).firstElementChild
          $clone.slot = 'instance'
          this.appendChild($clone)
        }
      }
    } else {
      const $previous = this.querySelector('[slot="instance"]')
      if ($previous) {
        $previous.remove()
      }
    }
  }
}

[pragmasoft-ua]

I faced a reverse problem to this one.

I have a slot with a fallback content, and I expected that if the slot content is provided, fallback elements should not be connected to the dom at all, but they are.

For now I remove fallback content in the slotchanged event handler (only called if the slotted content is provided)
but to be fair don't like the solution.