title: Failing to inject isolated content from a Chrome Extension using React and Shadow Dom
body: <p>I'm writing a Chrome extension using React.
  This extension has some content part, which injects a widget on some specific pages.
  The stylesheet of the host page and the widget are completely different, therefore I don't want them to be mixing up.
  To be more specific the widget uses <a href="http://react.semantic-ui.com/" rel="nofollow noreferrer">Semantic-UI</a> components and some of the host pages use <em>bootstrap</em>.</p>
  
  <p>I found out about Shadow Dom and based on my understanding it's supposed to avoid the css <a href="https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom" rel="nofollow noreferrer">leaking out from my component and vice-versa</a></p>
  
  <blockquote>
    <p>Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don't leak out and page styles don't bleed in.</p>
  </blockquote>
  
  <p>Great, it seems that it's exactly what I want.</p>
  
  <p>So then I've changed my React root function to something like this:</p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  import {Provider} from 'react-redux';
  import {Store} from 'react-chrome-redux';
  
  import AppContainer from './components/AppContainer';
  import Toolbar from './components/Toolbar';
  
  const proxyStore = new Store({portName: 'my-extension'});
  
  const anchor = document.createElement('div');
  anchor.id = 'my-extension-anchor';
  const shadowRoot = anchor.attachShadow({mode: 'open'})
  
  const semanticUrl = chrome.runtime.getURL("styles/semantic.min.css")
  
  document.body.appendChild(anchor)
  
  render(
    &lt;Provider store={proxyStore}&gt;
        &lt;div&gt;
            &lt;link id='semantic-ui' rel='stylesheet' type='text/css' href={semanticUrl} media='all' /&gt;
            &lt;AppContainer&gt;
                &lt;Toolbar /&gt;
            &lt;/AppContainer&gt;
        &lt;/div&gt;
    &lt;/Provider&gt;
    , shadowRoot);
  </code></pre>
  
  <p>The first thing I noticed is that my widget was not getting the right fonts.
  After some google, I found <a href="http://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/" rel="nofollow noreferrer">this post</a> explaining I'd to take my font-faces out from semantic-ui files and inject it on the head of the host.
  Now it seems to be working, but it still sounds like a cheap workaround.</p>
  
  <p>Anyway, even after this change it's not working as I expected, the CSS inside my widget is not leaking out anymore... but my widget is being affected by the current page stylesheet.
  I've tried a few other modifications:</p>
  
  <ol>
  <li>Using mode closed instead of open </li>
  <li>Using a few React libraries, i.e: <a href="https://github.com/Wildhoney/ReactShadow" rel="nofollow noreferrer">ReactShadow</a></li>
  </ol>
  
  <p>When I inspect my element I can see it's using some stylesheets from the host page, showing something like:</p>
  
  <blockquote>
    <p>Inherited from div#my-extension-anchor body { bootstrap.min....</p>
  </blockquote>
  
  <p>And my widget should be "bootstrap-free".</p>
  
  <p>Did I misunderstood how Shadow DOM works? 
  There's a way to achieve what I want?</p>