#Question: How to prevent adding a child to a component without Slot?

3 messages · Page 1 of 1 (latest)

upbeat bramble
#

Hello,

In example below, I'm able to add a child to MyComponent even it does not include <Slot/>. The runtime behavior is correct (child content not rendered), but how can I type the component to prevent adding child where not allowed or supported?

Any guidance much appreciated. Thanks!

import { component$ } from "@builder.io/qwik";

const MyComponent = component$(() => {
  return <div>content</div>;
});

export default component$(() => {
  return (
    <MyComponent>
      <p>
        Passes static check, but shouldn't since MyComponent contains no Slot.
      </p>
    </MyComponent>
  );
});

sand bear
#

a little tedious, but component$<{children?:never}> works

#

I don't think we can ask typescript to dig into the returned template and determine if <Slot/> is in there somewhere, but maybe that's possible?