CustomElements не работает в Firefox с включенными свойствами about:config

CanIuse говорит, что webcomponents v1 включен в Firefox v. 61 с about:config свойствами dom.webcomponents.customelements.enabled и dom.webcomponents.shadowdom.enabled установить на истину. И многие посты и статьи в сети согласны с этим.

Итак, у меня есть Firefox версии 61.0.2 с набором вышеупомянутых свойств, и у меня есть пользовательский элемент, определенный, как показано ниже. Это отображается, как и ожидалось, в Chrome, но в Firefox просто ничего не отображается и на консоли нет ошибок.

<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-файле, в который я импортировал файл, содержащий приведенный выше код.

Я понимаю, что есть полифилл, который я могу использовать, но он недоступен в среде, в которой будет работать мое приложение. Я должен что-то упустить, так как все, что я читал в Интернете, похоже, указывает на то, что Firefox должен иметь возможность отображать элемент, как я его определил.


javascript web-component custom-element firefox shadow-dom
person MidnightJava    schedule 20.08.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я пытаюсь использовать пользовательский элемент в отдельном html-файле, который я импортировал.

Я предполагаю, что вы используете функцию HTML Import, которая не реализована в Firefox.

Поэтому вам нужно будет использовать для этого полифилл: файл html-imports.min.js, который вы можете найти на репозиторий polyfill github.

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

В качестве альтернативы (если вы не хотите использовать импорт HTML) поместите код вашего пользовательского элемента в файл Javascript:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
    this.shadow.innerHTML = `...html content`;
  }
}
customElements.define('my-element', MyElement);
person Supersharp    schedule 21.08.2018
comment
Спасибо за это. Я не знал, что FF не поддерживает rel-ссылки, и это определенно было проблемой. Поскольку я не могу использовать полифиллы в среде развертывания, я импортировал файл js, как вы предложили, и переместил элементы шаблона и стиля в основной файл html. - person MidnightJava; 22.08.2018
comment
обратите внимание, что если вы не хотите помещать шаблон в основной документ, вы можете загрузить его с помощью fetch из XMLHttpRequest - person Supersharp; 22.08.2018