Полимерные веб-компоненты и Mozilla Firefox в Windows с использованием веб-страниц

Я пытаюсь включить веб-компоненты Polymer для Firefox, чтобы я мог перемещаться по своей веб-странице Polymer в Firefox.

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

https://www.designedbyaturtle.co.uk/2015/how-to-enable-web-components-in-firefox-shadow-dom/.

Я также импортирую полифиллы webcomponents.js в свой index.html.

Итак, я сделал следующее:

Я написал следующий веб-компонент test-firefox.html в каталоге elements:

<dom-module name="test-firefox">
  <template>
    <h2>Firefox says hi too!</h2>
  </template>
  <script>
    Polymer({
      is: 'test-firefox'
    });
  </script>
</dom-module>

а это мой index.html файл:

<!doctype html>
<html>
  <head>
      <link rel="import" href="webjars/polymer/1.6.1/polymer.html">
      <script src="webjars/webcomponentsjs/0.7.22/webcomponents.js"></script>
      <script src="webjars/webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>

      <link rel="import" href="elements/test-firefox.html">

  </head>
  <body>
    <h1>Hello Firefox!</h1>
    <test-firefox></test-firefox>
  </body>
</html>`

Как видите, вместо bower_components я использую соответствующий webjars (для Polymer, webcomponents.js, webcomponents-lite.min.js). Я добавил зависимости для тех, что указаны в моем pom.xml, и они обычно устанавливаются.

Я заметил, что это происходит довольно странно:

  • Для Google Chrome все работает отлично.
  • Для Mozilla Firefox в Linux то же самое.
  • Для Mozilla Firefox в Win10 веб-компонент не отображается, это похоже на то, что браузер полностью игнорирует его.

Любые идеи?


person luthien    schedule 05.05.2017    source источник


Ответы (1)


Можешь переписать свой вопрос?

Вам не нужно ничего включать, чтобы веб-сайт работал в Firefox (конечно, вы можете посетить https://www.polymer-project.org/, и он работает для вас).

Если firefox «игнорирует» ваши компоненты, возможно, вам не хватает импорта для этих элементов.

Посетите эту страницу https://www.polymer-project.org/1.0/docs/devguide/registering-elements и посмотрите, как используется <link rel="import" href="bower_components/polymer/polymer.html">. Вам также необходимо импортировать ваши собственные компоненты таким образом, чтобы они работали.

person Ergo    schedule 08.05.2017
comment
Спасибо за ваш ответ. Я переписал свой вопрос выше, чтобы дать немного больше информации. О чем я раньше не упоминал, и что важно, я использую веб-файлы. Если у вас есть опыт / идея по этому поводу, я был бы благодарен за прочтение. - person luthien; 10.05.2017
comment
Извините, у меня нет опыта работы с веб-файлами. В целом ваш код выглядит нормально - но вы должны использовать только webcomponents-lite.min.js - и, пожалуйста, удалите внутренний флаг firefox для веб-компонентов из этой статьи - он может что-то нарушать в вашем коде. Также просмотрите консоль своего браузера - чтобы увидеть, не получили ли вы неверные пути импорта и ошибки 404. - person Ergo; 13.05.2017