slotFilled()

const slotFilled: (...values: [string, 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.

Are multiple slots present, all of them may be checked. To limit the check to a specific slot, provide an optional slot name.

Parameters

values

...[string, string]

Returns

DirectiveResult<typeof SlotFilledDirective>

A directive that can be used in a template.

Examples

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

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

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>