title: How to "reset" a DOM subtree's CSS style?
body: <p>I'm developing a Chrome Extension, an HTML subtree and a CSS style sheet are injected into the original page. I want the injected HTML subtree not to be affected by the original CSS, but I have no idea about how to finish the job perfectly. The problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;style&gt;
  
  /* original CSS */
  input[type="text"] {
      background: green;
  }
  
  input[type="text"]:focus {
      background: yellow;
  }
  
  /* my injected CSS somewhere else */
  .injected-root input[type="text"] {
      border: solid 1px navy;
  }
  &lt;/style&gt;
  
  &lt;input type="text" value="original text"&gt;
  &lt;div class='injected-root'&gt;
      &lt;input type="text" value="injected text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The original page is a random page on the internet, so it's impossible to know what the original CSS would be. As you can see from the code above, my injected text input is affected by the original CSS, I know it can be fixed by override the original CSS with new default values:</p>
  
  <pre><code>.injected-root input[type="text"] {
      border: solid 1px navy;
      background: white;
  }
  
  .injected-root input[type="text"]:focus {
      background: white;
  }
  </code></pre>
  
  <p>But I don't think it's feasible to do it "manually" by supply every default attribute.</p>
  
  <p>So, the question is: </p>
  
  <ul>
  <li><strong>Is there a way to reset the style of a subtree completely?</strong></li>
  </ul>
  
  <p>or</p>
  
  <ul>
  <li><strong>Any other strategy to make the subtree seems in an "isolated universe" (only affected by its own injected CSS)?</strong></li>
  </ul>