title: HTMl Import own WebComponent
body: <p>In my index.html I import an external HTML file with an Template, Shadow DOM etc. A custom web Component. </p>
  
  <p>//  index.html</p>
  
  <pre><code>... 
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="/html-components/userlogin-header.html" &gt;
  &lt;head&gt;
  &lt;body&gt;
  &lt;userlogin-header username="Test User"userimage="http://domain.com/img.jpg"&gt;&lt;/userlogin-header&gt;
  ...
  </code></pre>
  
  <p>And the other file userlogin-header.html:</p>
  
  <p>// userlogin-header.html</p>
  
  <pre><code>&lt;template id="userlogin-header"&gt;
  
      &lt;div class="imgbox"&gt;
          &lt;img src="" class="userimage"&gt;
      &lt;/div&gt;
      &lt;div class="userinfo"&gt;                          
          &lt;div class="name"&gt;&lt;span class="username"&gt;&lt;/div&gt;                     
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      var doc = this.document.currentScript.ownerDocument,
      UserLoginProto = Object.create( HTMLElement.prototype );
      UserLoginProto.createdCallback = function() {
          var template = doc.querySelector( "#userlogin-header" ),
          box = template.content.cloneNode( true );
  
          this.shadow = this.createShadowRoot();
          this.shadow.appendChild( box );
  
          var username = this.shadow.querySelector( '.userinfo .username' );
          username.innerHTML = ( this.getAttribute( 'username' ) || 'Unbekannt' );
  
          var imageurl = this.shadow.querySelector( 'img.userimage' );
  
          imageurl.src = 'https://secure.gravatar.com/avatar/' + this.getAttribute( 'userimage' ) + '1?s=40&amp;d=http://s3-01.webmart.de/web/support_user.png';
      };
  
       var Xuserlogin = doc.registerElement( 'userlogin-header', { 'prototype' : UserLoginProto } );
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that there is the following error on call index.html</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'content' of null 
  </code></pre>
  
  <p>If I enable HTML Import in my Chrome everything works correctly. But then I disable this and use platform.js instead there is this error.</p>
  
  <p>Is there any solution for this problem? I do not want to use the whole polymer framework.</p>