使用javascript时css样式不起作用

Question

好吧，如果我把它放在一个html页面并加载它有效的页面（见下文）

然而，当我尝试在加载表单的同时通过jquery加载表单时，文本区域在聚焦时不会突出显示相同的内容，而是在其周围显示蓝色边框。

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 = '<form action="#">\
    <div class="mdl-textfield mdl-js-textfield">\
       <textarea class="mdl-textfield__input" type="text" rows= "3" id="statusupdate" ></textarea>\
       <label class="mdl-textfield__label" for="text7">What have you been up to?</label>\
    </div>\
    <div class="mdl-cell mdl-cell--1-col mdl-cell--top">\
       <div id="tt3" class="icon material-icons">add_a_photo</div>\
    </div>\
\
    <div class="mdl-dialog__actions">\
     <button type="button" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Post</button>\
     <button type="button" class="mdl-button close">Changed My Mind</button>\
   </div>\
 </form>';
  $('.mdl-dialog__content').html(statusform);
  $('.mdl-textfield__input').focus();
});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});

<dialog class="mdl-dialog status-dialog">
  <!--<h4 class="mdl-dialog__title">What have you been upto?</h4>-->
  <div id="mdl-dialog__content" class="mdl-dialog__content">
    <form action="#">
      <div class="mdl-textfield mdl-js-textfield">
        <textarea class="mdl-textfield__input" type="text" rows="3" id="statusupdate"></textarea>
        <label class="mdl-textfield__label" for="text7">What have you been up to?</label>
      </div>
      <div class="mdl-cell mdl-cell--1-col mdl-cell--top">
        <div id="tt3" class="icon material-icons">add_a_photo</div>
      </div>

      <div class="mdl-dialog__actions">
        <button type="button" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Post</button>
        <button type="button" class="mdl-button close">Changed My Mind</button>
      </div>
    </form>
  </div>

</dialog>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="./templates/main/user-theme/tpl-files/s-h6uauhiaio.js"></script>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>

我没有看到任何差异真的期望通过js文件加载？样式表在正常的html页面的标题中，这是在body标记的末尾。