title: Isolating JS from other JS in the same HTML document
body: <p>Consider this code:</p>
  
  <pre><code>&lt;script&gt;var foo = 'bar';&lt;/script&gt;
  &lt;div id='isolated'&gt;
      &lt;script&gt;console.log(foo)&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This will return <code>'bar'</code> to the console. However I'd like for <code>foo</code> and any other variables declared outside <code>#isolated</code> to be <code>undefined</code> from within it.</p>
  
  <p>How can this be achieved? A cross-browser, lightweight and native solution would be preferable. </p>