title: apply webkit scrollbar style to just textarea
body: <p>Is there any way to use <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/" rel="nofollow">these shadow dom elements</a> to apply css only to a specific element. I'm thinking that I want the <a href="http://css-tricks.com/custom-scrollbars-in-webkit/" rel="nofollow">webkit customer scrollbar</a> implemented on my page, but in a <code>textarea</code> want their width to be less than they are on the document body. </p>
  
  <p>so if I have a page with the styles</p>
  
  <pre><code>::-webkit-scrollbar {
      width: 12px;
  }
  
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
      border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  }
  
  div{
      height:5000px;
      width:150px;
      background-color:red;
      float:left;
  }
  textarea{
  float:left;    
      max-height:150px;
      height:150px;
  }
  </code></pre>
  
  <p>and the HTML</p>
  
  <pre><code>&lt;div id="theDiv"&gt;
      asdf
  &lt;/div&gt;
  
  &lt;textarea id="thebox"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/textarea&gt;
  </code></pre>
  
  <p>I would like to apply a stylesheet directly to the textarea and not have it affect any other elements.</p>
  
  <pre><code> function ImportStyleFile () {
              var el = document.getElementById('thebox');
              var linkTag = el.createElement ("link");
              linkTag.href = "new.css";
              linkTag.rel = "stylesheet";
              var head = document.getElementsByTagName ("head")[0];
              head.appendChild (linkTag);
          }
  </code></pre>
  
  <p>where <code>new.css</code> has a style like, say, </p>
  
  <pre><code>::-webkit-scrollbar-thumb {
      border-radius: 0px;
      -webkit-box-shadow: inset 0 0 6px rgba(20,20,20,0.5); 
  }
  </code></pre>
  
  <p>Unfortunately, this does not work so simply. I guess you can't create a stylesheet and attach it to a textarea. Any ideas on how I could get this to work</p>