Support designating a code component slot as the React component's `children` prop to allow JSX nesting
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3531766. -->
Reported by: [balintbrews](https://www.drupal.org/user/613760)
Related to !386
>>>
<h3 id="overview">Overview</h3>
<div class="note-version">
<h4>Background</h4>
<p>
React props are conceptually similar to Drupal SDC props. There is no equivalent of Drupal SDC slots in React. In XB, we pass slot values as React props to code components. What translates arbitrary markup to React prop values are the slots inside <a href="https://docs.astro.build/en/concepts/islands">Astro islands</a>, which hydrate the React component to the page.
</p>
<p>
React allows <a href="https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children">JSX nesting via a <strong>prop named <code>children</code></strong></a>.
</p>
</div>
<p>When <em>children</em>/<em>Children</em> is used as a slot name in code components, the Astro island hydration currently fails. <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3509301" title="Status: Closed (fixed)">#3509301: Forbid using 'children' as a slot name in code components (it results in JS errors in (p)react-powered code components)</a></span> identified this problem and added a stopgap to prevent users from naming slots this way.</p>
<p>While the name <em>children</em> is not necessarily descriptive to end users, being able to make use of the <code>children</code> prop is essential for the code components' DX. Here is an example.</p>
<p>Let's say I would like to write a <em>Container</em> component to add some spacing around any content:</p>
<pre>const Container = ({ content }) => <div className="p-4">{content}</div>;</pre><p>I can add a slot named <em>Content</em>, 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:</p>
<pre>import Container from '@/components/container';<br><br>const Hero = ({ title, description }) => {<br> const content = (<br> <div className="bg-blue-500 p-4"><br> <h1 className="text-2xl font-bold">{title}</h1><br> <p className="text-gray-500">{description}</p><br> </div><br> );<br><br> return <Container content={content} />;<br>};</pre><p>While this works, any React developer — thus libraries and LLMS — will prefer making use of the <code>children</code> prop in this case to nest JSX. If we were able to name or designate our <em>Content</em> slot as the React component's <code>children</code> prop, we would unlock the following syntax:</p>
<pre>const Hero = ({ title, description }) => (<br> <Container><br> <div className="bg-blue-500 p-4"><br> <h1 className="text-2xl font-bold">{title}</h1><br> <p className="text-gray-500">{description}</p><br> </div><br> </Container><br>);</pre><h3 id="proposed-resolution">Proposed resolution</h3>
<ol>
<li>Investigate what causes the Astro island hydration failure.</li>
<li>Allow entering <em>children</em>/<em>Children</em> or add a checkbox to designate a slot to be used as the <code>children</code> prop.</li>
</ol>
<h3 id="ui-changes">User interface changes</h3>
<p><em>TBD</em></p>
> Related issue: [Issue #3509301](https://www.drupal.org/node/3509301)
issue