#Is it possible to use `q:slot` on a Fragment?

5 messages · Page 1 of 1 (latest)

azure turtle
#

The title says it all. Perhaps it is technically impossible. I know that, for the moment, it is.

I was meaning to do something like this:

const WithSlots = component$(() => {
  return (
    <article>
      <h1><Slot name='title' /></h1>
      <Slot />
    </article>
  )
})

const UseSlots = component$(() => {
  return (
    <WithSlots>
      <Fragment q:slot='title'>Just Text</Fragment>
      <div>...</div>
    </WithSlots>
  )
})
undone raft
#

q:slot doesn't appear to be a valid prop on Fragment.

azure turtle
#

No, it is not. But, not so long ago, a Fragment also could have no key.

Being able to pass just text is something most useful. So perhaps, if technically possible, it would be very good if Fragment does accept a q:slot.

radiant rover
#

I support the idea. My use case would be using different prepared illustrations (not just resized variants of the same image) on different screen sizes like so.

<Fragment q:slot='illustration'>
  <MobileIllustration class="block sm:hidden" /><DesktopIllustration class="hidden sm:block" />
</Fragment>
inland swift