title: getting error link.import is null in firefox
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="import" href="header.html"&gt;
   &lt;link rel="import" href="footer.html"&gt;
  
   &lt;script&gt;
            var link = document.querySelector('link[href*="header"]');
            var template = link.import.querySelector('template');
            var clone = document.importNode(template.content, true);
            document.querySelector('#nav').appendChild(clone);
   &lt;/script&gt;
   &lt;script&gt;
            var link = document.querySelector('link[href*="footer"]');
            var template = link.import.querySelector('template');
            var clone = document.importNode(template.content, true);
            document.querySelector('.footer').appendChild(clone);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  
  <em>I saprated header and footer, and i have to call in all pages, am using HTML5, but header and footer shown in only Google Chrome browser, FireFox and safari dosen't shows header and footer and gives error like TypeError: link.import is null</em></p>