slotFilled()

const slotFilled: (attr?: string, slotName?: string) => DirectiveResult<typeof SlotFilledDirective>;

Checks if a nested slot has elements assigned to it. If so, it sets the specified attribute on the host element, or removes it if not.

This allows e.g. for conditional styling based on the given attribute: footer[data-has-elements] { ... }. Note that the :empty pseudo-class is not meant to target slots, as these have not direct children, but rather their assigned elements.

Under the hood, all (bubbled) slotchange events are listened to, and the amount of assigned elements is checked. So if multiple slots are present, all of them are taken into account.

To limit the check to a specific (named) slot, provide an optional slot name. To limit the check to the (unnamed) default slot instead, provide an empty string as slot name.

Parameters

attr?

string

The attribute to set on the host element when the slot has elements assigned.

Default

'data-has-elements'

slotName?

string

The name of the slot to check. If not provided, all slots will be observed. To check for the default (unnamed) slot, provide an empty string.

Returns

DirectiveResult<typeof SlotFilledDirective>

A directive that can be used in a template.

Examples

Sets the data-has-elements attribute on the main element if any of the slots have elements assigned to it.

<main ${slotFilled('data-has-elements')}>
  <slot></slot>
  <slot name="footer"></slot>
</main>

Sets the data-has-elements attribute on the main element if the default (unnamed) slot has elements assigned to it.

<main ${slotFilled('data-has-elements', '')}>
  <slot></slot>
  <slot name="footer"></slot>
</main>

Sets the data-has-social-links attribute on the footer element if the social slot has elements assigned to it.

<footer ${slotFilled('data-has-social-links', 'social')}>
  <slot name="meta"></slot>
  <slot name="social"></slot>
</footer>