文章/答案/技术大牛

发布

社区首页 >问答首页 >HTMl导入自己的WebComponent

问HTMl导入自己的WebComponent
EN

Stack Overflow用户

提问于 2014-07-16 14:31:47

回答 1查看 2.7K关注 0票数 3

在我的index.html中，我导入了一个带有模板、Shadow等的外部HTML文件，这是一个定制的web组件。

// 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>
...

另一个文件userlogin- file er.html：

// userlogin-header.html er.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来代替这个错误。

这个问题有什么解决办法吗？我不想使用整个聚合物框架。

javascript

html

import

platform

web-component

回答 1

Stack Overflow用户

发布于 2014-07-17 15:24:14

这是这个警告的一种症状。

在本机HTML中，document.currentScript.ownerDocument引用导入文档本身。在“填充”中使用document._currentScript.ownerDocument (注意下划线)。

一旦您改变了它，您还需要使用document.registerElement而不是doc.registerElement。您希望注册元素，以便它对导入文档是可见的，而不是导入的文档。

var Xuserlogin = document.registerElement(...);

这是一个工作压块。

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24783504

复制

相似问题

问HTMl导入自己的WebComponent
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTMl导入自己的WebComponentEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTMl导入自己的WebComponent
EN