CustomElements在启用about:config属性的情况下在Firefox中不起作用

问题描述

CanIuse 说，在Firefox中启用了 webcomponents v1v.61，将 dom.webcomponents.customelements.enabled 和 dom.webcomponents.shadowdom.enabled 属性设置为true.网络上的许多帖子和文章都同意这一点.

CanIuse says that webcomponents v1 is enabled in Firefox v. 61 with the about:config properties dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled set to true. And many posts and articles on the web agree with that.

因此，我具有设置了上述属性的Firefox 61.0.2版，并且定义了一个自定义元素，如下所示.这会在Chrome中按预期方式呈现，但是在Firefox中，根本不会呈现任何内容，并且在控制台上也没有错误.

So I have Firefox version 61.0.2 with the aforementioned properties set, and I have a custom element defined as shown below. This renders as expected in Chrome, but in Firefox there is simply nothing rendered and no errors on the console.

<template id="t">
   ...html content
</template>

<script>
    let template = document.currentScript.ownerDocument.querySelector('#t');

      class MyElement extends HTMLElement {

        constructor() {
          super();
          this.shadow = this.attachShadow({mode: 'open'});
          this.shadow.appendChild(template.content.cloneNode(true));
        }
      }
      customElements.define('my-element', MyElement);
</script>

以防万一，我试图在一个单独的html文件中使用自定义元素，并将包含上面代码的文件导入到该文件中.

In case it matters, I'm trying to use the custom element in a separate html file to which I've imported the file which contains the code above.

我知道我可以使用一个polyfill，但是在我的应用程序可以运行的环境中不可用.我一定想念一些东西，因为我在网上阅读的所有内容似乎都表明Firefox应该能够按照我定义的方式呈现该元素.

I understand there is a polyfill I can use, but it's not available in the environment where my app will run. I must be missing something, as everything I read online seems to indicate that Firefox should be able to render the element as I've defined it.

推荐答案

那么我想您使用了未实现的 HTML导入功能在Firefox中.

I suppose then that you use the HTML Imports feature that is not implemented in Firefox.

因此，您需要为此使用一个polyfill:您可以在file html-imports.min.js webcomponents/html-imports"rel =" nofollow noreferrer> polyfill github的存储库.

Therefore you'll need to use a polyfill for that: the file html-imports.min.js that you can find on the polyfill github's repository.

<script src="html-imports.min.js"></script>
<link rel="import" href="your-custom-element.html">

或者(如果您不想使用HTML导入)，请将自定义元素的代码放在Javascript文件中:

Alternately (if you don't want to use the HTML Imports), put the code of your custom element in a Javascript file:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
    this.shadow.innerHTML = `...html content`;
  }
}
customElements.define('my-element', MyElement);

这篇关于CustomElements在启用about:config属性的情况下在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！