title: Web Component Template Error
body: <p>Here is my index.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="webcomponentsjs/webcomponents.js"&gt;&lt;/script&gt;
          &lt;link rel="import" href="test-component.html"&gt; 
      &lt;/head&gt;
      &lt;body&gt;
  
  
          &lt;test-component id ="host"&gt;
              &lt;p&gt;test&lt;/p&gt;
          &lt;/test-component&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the test-component.html file:</p>
  
  <pre><code>&lt;template id = "template"&gt;
      &lt;p&gt; this is the shadow dom&lt;/p&gt;
      &lt;content select = "p"&gt;&lt;/content&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      var test_component = document.registerElement("test-component", {
          prototype: Object.create(HTMLElement.prototype,{
              createdCallback:{
                  value: function(){
                      var host = document.querySelector("#host");
                      var root = host.createShadowRoot();
  
                      var template = document.querySelector("#template");
                      var content = document.importNode(template.content, true);
  
                      root.appendChild(content);
                  }
              }
          })
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>for some reason I'm getting an error on this line:</p>
  
  <pre><code>var content = document.importNode(template.content, true);
  </code></pre>
  
  <p>The error is: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'content' of null</p>
  </blockquote>
  
  <p>Anyone know why this is happening?</p>