Support designating a code component slot as the React component's `children` prop to allow JSX nesting

Overview

When children/Children is used as a slot name in code components, the Astro island hydration currently fails. 🐛 Using 'children' as a slot results in errors Active identified this problem and added a stopgap to prevent users from naming slots this way.

While the name children is not necessarily descriptive to end users, being able to make use of the children prop is essential for the code components' DX. Here is an example.

Let's say I would like to write a Container component to add some spacing around any content:

const Container = ({ content }) => <div className="p-4">{content}</div>;

I can add a slot named Content, and this will do the job, content editors can place any content inside the slot. Now, what if I would like to use this component in another component I'm working on as a first-party import? Here is how that looks:

import Container from '@/components/container';

const Hero = ({ title, description }) => {
  const content = (
    <div className="bg-blue-500 p-4">
      <h1 className="text-2xl font-bold">{title}</h1>
      <p className="text-gray-500">{description}</p>
    </div>
  );

  return <Container content={content} />;
};

While this works, any React developer — thus libraries and LLMS — will prefer making use of the children prop in this case to nest JSX. If we were able to name or designate our Content slot as the React component's children prop, we would unlock the following syntax:

const Hero = ({ title, description }) => (
  <Container>
    <div className="bg-blue-500 p-4">
      <h1 className="text-2xl font-bold">{title}</h1>
      <p className="text-gray-500">{description}</p>
    </div>
  </Container>
);

Proposed resolution

1. Investigate what causes the Astro island hydration failure.
2. Allow entering children/Children or add a checkbox to designate a slot to be used as the children prop.

User interface changes

TBD