Slot introspection API — conditionally render wrappers based on slot content

[WadihAchkar]

What is it about?

A way to check whether a named slot has projected content, so components can conditionally render wrapper elements instead of always outputting empty DOM nodes.

What's the motivation for this proposal?

Problem I'm trying to solve:

Components with optional named slots (e.g. prefix/suffix icons in a Chip, optional headers/footers in a Card) are forced to always render wrapper elements around <Slot />, even when no content is projected. This results in unnecessary empty DOM nodes.

Example of the problem

// The <div class="chip__icon-wrapper"> wrappers always render,
// even when no content is projected into prefix/suffix
export const Chip = component$(() => {
  return (
    <div class="chip">
      <div class="chip__icon-wrapper">
        <Slot name="prefix" />
      </div>
      <span><Slot /></span>
      <div class="chip__icon-wrapper">
        <Slot name="suffix" />
      </div>
    </div>
  );
});

Proposed Solution / Feature

A built-in hook or utility that allows checking whether a named slot has projected content.
For example:

export const Chip = component$(() => {
  const hasPrefix = useSlot$('prefix');
  const hasSuffix = useSlot$('suffix');

  return (
    <div class="chip">
      {hasPrefix.value && (
        <div class="chip__icon-wrapper">
          <Slot name="prefix" />
        </div>
      )}
      <span><Slot /></span>
      {hasSuffix.value && (
        <div class="chip__icon-wrapper">
          <Slot name="suffix" />
        </div>
      )}
    </div>
  );
});

Links / References

Here's how other frameworks such as Astro solved this problem: Astro.slots