title: HTML5 Import with dynamically created link
body: <p>I'm trying to understand, why HTML5 Import doesn't work with dynamically created <code>link</code> element.</p>
  
  <p><strong>First example.</strong> It's work fine.</p>
  
  <p>main_page.html:</p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="import" href="import.html"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script&gt;
          var imported = document.querySelector('link[rel="import"]').import;
          var el = imported.querySelector('#foo');
          document.body.appendChild(el);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>import.html:</p>
  
  <pre><code>&lt;div id="foo"&gt;foo&lt;/div&gt;
  </code></pre>
  
  <p><strong>Second example.</strong> For some reason, it doesn't work. </p>
  
  <p>main_page.html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;script&gt;
          var link = document.createElement('link');
          link.rel = 'import';
          link.href = 'import.html';
          document.head.appendChild(link);
  
          var imported = document.querySelector('link[rel="import"]').import;
          var el = imported.querySelector('#foo');
          document.body.appendChild(el);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>import.html:</p>
  
  <pre><code>&lt;div id="foo"&gt;foo&lt;/div&gt;
  </code></pre>
  
  <p>Why it occurs and how it may be fixed?</p>