title: How to force Antd to append element as child element of div React renders to instead of to HTML body?
body: <h2>Edit:</h2>
  
  <p>I figured it out &amp; posted answer below.</p>
  
  <hr>
  
  <h2>Original Question</h2>
  
  <p>I am trying to create a completely compartmentalized web application within a shadow-dom and I've been using Antd components and ran into the issue where Antd is appending drop-down options into the body tag instead of as a child of the element that React is rendering into.</p>
  
  <p>To isolate this issue I've removed everything outside of just React.render &amp; a single Antd element which still does the same thing.</p>
  
  <p>I then used a different component, "react-date-picker", which works how I had hoped Antd did, where the component renders as a child of the div specified for react.</p>
  
  <p>Unfortunately, Antd rendering to the body of the HTML instead of as a child makes using shadow-root pointless.</p>
  
  <p>Essentially my question is: </p>
  
  <p>Is this Antd's normal functionality? If not then what might I be screwing up to have this happen? If so then is there a built-in Antd option that I'm missing that will render Antd options as child elements? If that option doesn't exist within their libraries, is there a way for me to force Antd to render as a child of my shadow-root node?</p>
  
  <p>Here is what I'm using to render the Antd DatePicker component:</p>
  
  <pre><code>import ReactDOM from 'react-dom';
  import React from 'react';
  import DatePicker from 'antd/lib/date-picker';
  ReactDOM.render(&lt;DatePicker/&gt;, document.getElementById('entry-fields'));
  </code></pre>
  
  <p>Before clicking on the Antd date picker:
  <img src="https://i.imgur.com/cAq50bk.png" alt="before antd date-picker clicked"></p>
  
  <p>After clicking on it, drop down options are appended to <code>&lt;body&gt;</code> and not <code>&lt;div id="entry-fields&gt;</code>:
  <img src="https://i.imgur.com/4dOfV1m.png" alt="after antd date-picker clicked"></p>
  
  <p>Here is what I'm using to render the react-date-picker component to demonstrate the functionality I expected / need:</p>
  
  <pre><code>import ReactDOM from 'react-dom';
  import React from 'react';
  import DatePicker from "react-datepicker";
  class Example extends React.Component {
      state = {
          startDate: new Date()
      };
  
      handleChange = (date: any) =&gt; {
          this.setState({
              startDate: date
          });
      };
  
      render() {
          return (
              &lt;DatePicker
                  selected={this.state.startDate}
                  onChange={this.handleChange}
              /&gt;
          );
      }
  }
  ReactDOM.render(&lt;Example/&gt;, document.getElementById('entry-fields'));
  </code></pre>
  
  <p>Before clicking on the react-date-picker date picker:
  <img src="https://i.imgur.com/frnTszp.png" alt="before react-date-picker clicked"></p>
  
  <p>After clicking on the react-date-picker date picker (the drop down options are appended as children of the element react is rendered onto):
  <img src="https://i.imgur.com/2geSRdK.png" alt="after react-date-picker clicked"></p>
  
  <p>Basically I expected Antd to render its options encapsulated within the React rendered into <code>&lt;div&gt;&lt;/div&gt;</code> but it is instead appending elements on the <code>&lt;body&gt;&lt;/body&gt;</code>.</p>
  
  <p>I'm relatively inexperienced in the web-dev domain and have resorted to asking a question here after way too much time trying to find the answer on my own. I am getting extremely frustrated in web-dev in general where any question seems to yield hundreds of irrelevant medium blog posts that are not useful in any capacity... assuming that it's not just me not knowing what to search for yet to find the answers I need which could very well be the case.</p>
  
  <p>Really appreciate any help in advance.</p>