title: Importing styles into a web component
body: <p>What is the canonical way to import styles into a web component?</p>
  
  <p>The following gives me an error <code>HTML element &lt;link&gt; is ignored in shadow tree</code>:</p>
  
  <pre><code>&lt;template&gt;
      &lt;link rel="style" href="foo.css" /&gt;
      &lt;h1&gt;foo&lt;/h1&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I am inserting this using shadow DOM using the following:</p>
  
  <pre><code>var importDoc, navBarProto;
  
  importDoc = document.currentScript.ownerDocument;
  
  navBarProto = Object.create(HTMLElement.prototype);
  navBarProto.createdCallback = function() {
    var template, templateClone, shadow;
  
    template = importDoc.querySelector('template');
    templateClone = document.importNode(template.content, true);
  
    shadow = this.createShadowRoot();
    shadow.appendChild(templateClone);
  };
  
  document.registerElement('my-nav-bar', {
    prototype: navBarProto
  });
  </code></pre>