title: css style not working when using javascript
body: <p>Well it seems if I put this in a html page and load the page it works (see below)</p>
  
  <p>However when I try getting the form to load via jquery while it does load the form, the text area does not highlight the same when it is focused, instead it shows a blue border around it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dialog = document.querySelector('dialog');
  var showStatusDialogButton = document.querySelector('#show-dialog');
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  showStatusDialogButton.addEventListener('click', function() {
    dialog.showModal();
    var statusform = '&lt;form action="#"&gt;\
      &lt;div class="mdl-textfield mdl-js-textfield"&gt;\
         &lt;textarea class="mdl-textfield__input" type="text" rows= "3" id="statusupdate" &gt;&lt;/textarea&gt;\
         &lt;label class="mdl-textfield__label" for="text7"&gt;What have you been up to?&lt;/label&gt;\
      &lt;/div&gt;\
      &lt;div class="mdl-cell mdl-cell--1-col mdl-cell--top"&gt;\
         &lt;div id="tt3" class="icon material-icons"&gt;add_a_photo&lt;/div&gt;\
      &lt;/div&gt;\
  \
      &lt;div class="mdl-dialog__actions"&gt;\
       &lt;button type="button" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;Post&lt;/button&gt;\
       &lt;button type="button" class="mdl-button close"&gt;Changed My Mind&lt;/button&gt;\
     &lt;/div&gt;\
   &lt;/form&gt;';
    $('.mdl-dialog__content').html(statusform);
    $('.mdl-textfield__input').focus();
  });
  dialog.querySelector('.close').addEventListener('click', function() {
    dialog.close();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dialog class="mdl-dialog status-dialog"&gt;
    &lt;!--&lt;h4 class="mdl-dialog__title"&gt;What have you been upto?&lt;/h4&gt;--&gt;
    &lt;div id="mdl-dialog__content" class="mdl-dialog__content"&gt;
      &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
          &lt;textarea class="mdl-textfield__input" type="text" rows="3" id="statusupdate"&gt;&lt;/textarea&gt;
          &lt;label class="mdl-textfield__label" for="text7"&gt;What have you been up to?&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="mdl-cell mdl-cell--1-col mdl-cell--top"&gt;
          &lt;div id="tt3" class="icon material-icons"&gt;add_a_photo&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="mdl-dialog__actions"&gt;
          &lt;button type="button" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"&gt;Post&lt;/button&gt;
          &lt;button type="button" class="mdl-button close"&gt;Changed My Mind&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
  &lt;/dialog&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="./templates/main/user-theme/tpl-files/s-h6uauhiaio.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.getmdl.io/1.1.3/material.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't see any difference really expect one is being loaded via a js file? the style sheet is in the header of the html page like normal, this is at the end of the body tag.</p>