Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - HTMl 导入自己的 WebComponent

In lại 作者：搜寻专家 更新时间：2023-10-31 23:28:21 28 4
mua khóa gpt4 Nike

在我的 index.html 中，我导入了一个带有模板、Shadow DOM 等的外部 HTML 文件。一个自定义 Web 组件。

//索引.html

... 


<đầu>


...

和另一个文件 userlogin-header.html:

//用户登录-header.html





    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 } );

问题是调用index.html出现如下错误

Uncaught TypeError: Cannot read property 'content' of null

如果我在我的 Chrome 中启用 HTML 导入，一切正常。但是后来我禁用了它并改用 platform.js 出现了这个错误。

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

1 Câu trả lời

Đây là this caveat 的症状的 polyfill。

In a native HTML Imports, document.currentScript.ownerDocument references the import document itself. In the polyfill use document._currentScript.ownerDocument (note the underscore).

更改后，您还需要使用 tài liệu.registerElement 而不是 doc.registerElement。您想要注册该元素，使其对导入 文档可见，而不是导入文档可见。

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

这是一个 working plunk .

关于javascript - HTMl 导入自己的 WebComponent，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24783504/

28 4 0
Bài viết được đề xuất: javascript - 如何通过 Backbone 动态加载脚本？
Bài viết được đề xuất: php - PHP如何判断浏览器POST请求数据中的字符编码？
Bài viết được đề xuất: php - WooCommerce - 重命名和使用重命名的订单状态
Bài viết được đề xuất: html - 填充 :initial vs. 填充:0
搜寻专家
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com