title: Is there a counterpart to Angular "slots" for DOM nodes in React?
body: <p>The goal is to <a href="https://reactjs.org/docs/web-components.html#using-react-in-your-web-components" rel="nofollow noreferrer">create a W3C web component in React</a> which supports arbitrary DOM nodes as children.</p>
  
  <p>The initial markup in the browser should be like this:</p>
  
  <pre><code>  &lt;custom-button&gt;
      some &lt;u&gt;styled&lt;/u&gt; text here
    &lt;/custom-button&gt;
  </code></pre>
  
  <p>I would then:</p>
  
  <ul>
  <li>call <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define" rel="nofollow noreferrer"><code>customElements.define()</code></a> to register my React code as the implementation of the <code>custom-button</code>,</li>
  <li>inside the implementation create a shadow root inside <code>&lt;custom-button&gt;</code>,</li>
  <li>afterwards call <code>ReactDOM.render(&lt;CustomButton ...&gt;, shadowRoot);</code> to populate this shadow root</li>
  </ul>
  
  <p>The DOM structure in the browser is now:</p>
  
  <pre><code>  &lt;custom-button&gt;
      #shadow-root
        &lt;div class="CustomButton"&gt;
          &lt;!-- x --&gt;
        &lt;/div&gt;
      some &lt;u&gt;styled&lt;/u&gt; text here
    &lt;/custom-button&gt;
  </code></pre>
  
  <p>But this is not really the desired results; I need the original content of <code>&lt;custom-button&gt;</code> to render inside <code>&lt;div class="CustomButton"&gt;</code> now.</p>
  
  <p>I am aware of the React <code>children</code> prop, but as I understand it, it will only work for children that were also declared inside the React implementation and not with arbitrary DOM nodes that were created on the surrounding web component element.</p>
  
  <p>On the other hand I read that Angular implements a concept they call "transclusion" in which they provide <code>slots</code> which DOM children web component will be mapped into. <strong>Is there anything similar in React?</strong></p>
  
  <p>One quick "workaround" that I could think of in React is to:</p>
  
  <ul>
  <li>obtain the <code>ref</code> of the top-level JSX tag,</li>
  <li>find the shadow root in <code>ref.parentNode</code></li>
  <li>iterate through all children and re-attach them to <code>ref</code> as new parent</li>
  </ul>
  
  <p>This would only cover the initialization though. If, at runtime, some other script tried to append more children to <code>&lt;custom-button&gt;</code>, or re-order or delete previously inserted children, this would probably fail.</p>