在我的 index.html 中，我导入了一个带有模板、Shadow DOM 等的外部 HTML 文件。一个自定义 Web 组件。
//索引.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>
...
和另一个文件 userlogin-header.html:
//用户登录-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 出现了这个错误。
这个问题有解决办法吗？我不想使用整个聚合物框架。
最佳答案
这是 this caveat 的症状的 polyfill。
In a native HTML Imports,
document.currentScript.ownerDocumentreferences the import document itself. In the polyfill usedocument._currentScript.ownerDocument(note the underscore).
更改后，您还需要使用 document.registerElement 而不是 doc.registerElement。您想要注册该元素，使其对导入 文档可见，而不是导入文档可见。
var Xuserlogin = document.registerElement(...);
这是一个 working plunk .
关于javascript - HTMl 导入自己的 WebComponent，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24783504/