Question

我正在尝试创建新的自定义元素。

我有一个非常简单的html索引文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="dist/webcomponents-lite.js"></script>
    </head>

    <body>

        <h1>WebComponents</h1>
        <hello-world></hello-world>

        <script src="src/components/hello-world.js"></script>
    </body>
</html>

我的 hello-world 组件如下：

class HelloWorldElement extends HTMLElement {

    constructor(){
        super()

        this.innerHTML = `<h1>Hello Meetup !</h1>`;
    }    

    connectedCallback(){
        console.log("I'm here!");
    }

    disconnectedCallback(){
        console.log("I'm gone!");
    }

}

    window.customElements.define(
                    'hello-world', 
                     HelloWorldElement);

此代码段在Chrome和Safari中运行良好。

我添加了 webcomponents-lite.js 导入以添加对其他浏览器的支持。

然而，当尝试在Firefox中运行代码时，我收到以下错误：

too much recursion
[Learn More]
webcomponents-lite.js:93:170

我在网上发现了关于可以发生什么的非常少的信息。

我想我正在遵循网页组件网站polyfills page中解释的推荐路径。

知道发生了什么事吗？

由于

编辑：

我可以通过在firefox配置中启用 dom.webcomponents.customelements.enabled 和 dom.webcomponents.enabled 并删除polyfill来显示自定义元素，但这显然不是生产所需的东西。

Answer 1

错误是由于您修改了constructor中自定义元素的内部HTML内容，这是意外的，因此不应该这样做。

相反，您应该在之后执行此操作，例如在connectedCallback()方法中。

或者，如果要在constructor中定义内容，则应将其插入Shadow DOM。

注意：自定义元素polyfill有效地包含在 webcomponents-lite.js 中。

Answer 2

好吧，看起来我错过了另一个polyfill？

如果我也导入

    <script type="text/javascript" src="bower_components/custom-elements/custom-elements.min.js"></script>

在 web-components-lite.js polyfill之前，我已经没有任何问题了。我通过google documentation

找到了资源

这很奇怪，因为我认为自定义元素是网络组件polyfill本身的子部分之一......

使用自定义元素时，Firefox中的递归过多

2 个答案: