在我的index.html中,我使用Template,Shadow DOM等导入外部HTML文件。自定义Web组件。HTMl导入自己的WebComponent
// index.html的
...
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<link rel="import" href="/html-components/userlogin-header.html" >
<head>
<body>
<userlogin-header username="Test User"userimage="http://domain.com/img.jpg"></userlogin-header>
...
而其他文件用户登陆-了header.html:
// USERLOGIN-header.html中
<template id="userlogin-header">
<div class="imgbox">
<img src="" class="userimage">
</div>
<div class="userinfo">
<div class="name"><span class="username"></div>
</div>
</template>
<script>
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&d=http://s3-01.webmart.de/web/support_user.png';
};
var Xuserlogin = doc.registerElement('userlogin-header', { 'prototype' : UserLoginProto });
</script>
的问题是,有通话时出现以下错误index.html
Uncaught TypeError: Cannot read property 'content' of null
如果我在我的Chrome中启用HTML导入,那么一切正常。但后来我禁用了这个,并使用platform.js,而不是这个错误。
有没有解决这个问题的方法?我不想使用整个聚合物框架。
platform.js是您的'
'中第一个包含的文件吗? – CletusW是的,这是第一个包含在