title: What is the best way to encapsulate React app?
body: <p>I am trying to <strong>encapsulate a React application</strong> in a <strong>Web component's Shadow Root</strong> or an <strong>iFrame</strong> to build a <strong>widget</strong> for a Chatbot messenger like Intercom widget.</p>
  
  <p>I´m using:</p>
  
  <pre><code>React 16.8.6
  Typescript 3.5.3
  Redux 4.0.4 
  Styled-components 4.3.2 
  Material-UI 4.3.3
  </code></pre>
  
  <p>I based my Web component choice on <a href="https://reactjs.org/docs/web-components.html" rel="nofollow noreferrer">this</a> React official doc <em>(that didint mention any of my issue)</em>.</p>
  
  <p>First, I encountered some <strong>style issue</strong>, with both styled-components and Material-UI, because they both put their styles in the light DOM header. But, <strong>I figured out how to deal with both</strong> issues (I can help anyone with the same problems). [SOLVED]</p>
  
  <p>Then my components are rendered without a problem, but <strong>events are not working</strong>, After some research I found that when you render a react component inside Shadow DOM events will not be dispatched to react. I.e. when a user clicks on your react component nothing happens. so i used <a href="https://github.com/spring-media/react-shadow-dom-retarget-events" rel="nofollow noreferrer">this</a> repo to fix this issue and <strong>retarget and dispatch events</strong> to React. [PARTIALLY-SOLVED]</p>
  
  <p>But unfortunately, this is not enough, because some events like <code>onChange</code> don't get fixed, and some depth like Material-UI add their own events, The problem is in React it self check this <a href="https://github.com/facebook/react/issues/10422" rel="nofollow noreferrer">issue</a> and they are not so motivated to fix it in a near date.[ISSUE]</p>
  
  <p>So I decided to <strong>move to another encapsulation alternative</strong>, the <strong>iFrame</strong>. I didn't find a helpful tuto, repo or thread yet and all existing npm modules aren't updated neither optimized for Typescript.
  I need a clear way to encapsulate my app in the <code>#document</code> of the <code>iFrame</code>. </p>
  
  <p>Please, propose a repo. or give me any idea of implementation, any idea could be very helpful.</p>