title: Light DOM style leaking into Shadow DOM
body: <p>I am trying to create a Chrome extension with a floating widget. To do that, I have to isolate my element from the rest of the page. Shadow DOM looks like a perfect fit for that, but it isn't doing what I expected.</p>
  
  <p>Here is my content script:</p>
  
  <p>content.js</p>
  
  <pre><code>var lightDom = document.createElement('style');
  lightDom.innerText = 'div { color: red }';
  
  document.body.appendChild(lightDom);
  
  var shadowDom = document.createElement('div');
  
  document.body.appendChild(shadowDom);
  
  var shadowRoot = shadowDom.attachShadow({'mode': 'open'});
  
  shadowRoot.innerHTML = `
      &lt;style&gt;
          div {
              background-color: blue;
          }
      &lt;/style&gt;
      &lt;div&gt;Shadow!&lt;/div&gt;
  `;
  </code></pre>
  
  <p>The div inside the shadow DOM should have black text, but it has red text instead. Am I doing something wrong?</p>