时间戳

首页 > 解决方案 > 无法通过其默认构造函数动态实例化我的自定义元素

javascript - 无法通过其默认构造函数动态实例化我的自定义元素

问题描述

我创建了一个我想在我的网站上使用的自定义元素，当我在 html 文档中声明它时，构造函数被调用并且元素被实例化并显示没有任何错误。但是当我想在代码中实例化它时，它似乎缺少使用 new CustomElement() 对其构造函数的引用。

<html>
<head>

<!-- 
    ...
-->

<script src="/custom_elements.js" defer ></script>   

<!-- 
    ...
-->


<style>



</style>



<script >


    function init(){

        var ele = new CustomElement();
        // !! does not work



    }



</script>

</head>


<body onLoad="init();" >

<custom-element></custom-element>
<!-- works -->

</body>
</html>

// 在 custom_elements.js 中，类被定义为

class CustomElement extends HTMLElement {

    constructor() {
        super();

        // code that gets displayed flawlessly when instantiated from html 


    }



}


customElements.define('custom-element', CustomElement );

错误说：“未定义自定义元素”..

所以似乎缺少一些参考，因为当我将我的 CustomElement 的定义粘贴到我的代码所在的标记中时它就可以工作了。那么我如何加载我的脚本也引用它的文件，而不仅仅是 HTML代码..感谢您对这些事情如何工作的任何建议

编辑/错误原因

所以看起来这个实现在逻辑上没有任何问题，但是我的 custom_elements.js 文件有一个 if/else 子句，其中定义了元素。它是

if(!customElementsSupported){

    // custom elements not supported action

}else{

    // definitions of custom elements

}

我认为这必须将自定义元素放在本地范围内，从而阻止我的函数访问它们

标签： javascriptcustom-element

解决方案

defer - 当页面完成解析时，脚本将被执行。

含义 - 您CustomElement将在调用它后被执行。

如何避免 - 删除延迟并在正文标记结束之前使用脚本标记。

推荐阅读