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

【问题标题】：Too much recursion in Firefox when using custom elements使用自定义元素时 Firefox 中的递归过多
【发布时间】：2017-12-08 13:17:32
【问题描述】：

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

我有一个非常简单的 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);

这段代码 sn-p 在 Chrome 和 Safari 中运行良好。

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

但是，当尝试在 Firefox 中运行代码时，出现以下错误：

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

我在网上找到的关于可能发生的事情的信息非常少。

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

知道发生了什么吗？

谢谢

编辑：

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

【问题讨论】：

我还看到其他网站（例如 component.kitchen/tutorial）在 Firefox 中运行良好，所以上面的 HTML 肯定有问题

标签： javascript html firefox web-component custom-element

【解决方案1】：

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

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

或者，如果您想在 constructor 中定义内容，您应该将其插入到 Shadow DOM 中。

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

【讨论】：

感谢您的回答。我想知道shadow dom是否可以提供帮助。如果我手动导入自定义元素 polyfill，知道为什么代码可以正常工作吗？
@jlengrand 也许是因为它是 polyfill 的另一部分导致脚本失败（我认为是 Shadow DOM polyfill 部分）

【解决方案2】：

好吧，我好像错过了另一个 polyfill？

如果我也导入

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

在 web-components-lite.js polyfill 之前，我不再有任何问题。我通过google documentation找到了资源

这很奇怪，因为我认为 custom-elements 是 web-components polyfill 本身的子部分之一......

【讨论】：