importHref для edge / safari, в результате чего «пользовательский элемент с именем« dom-bind »уже определен - PullRequest
Новая
       26

importHref для edge / safari, в результате чего «пользовательский элемент с именем« dom-bind »уже определен

0 голосов
/ 12 января 2019

У меня были проблемы с ошибками на importHref в Polymer (polymer-2) в edge и safari. При начальной загрузке я получаю целый ряд ошибок, таких как ..

SCRIPT5022: пользовательский элемент с именем 'dom-bind' уже был определены. webcomponents-lite.js (168 225)

SCRIPT5022: пользовательский элемент с именем 'dom-repeat' уже был определены. webcomponents-lite.js (168 225)

SCRIPT5022: пользовательский элемент с именем 'dom-if' уже был определены. webcomponents-lite.js (168 225)

SCRIPT5022: пользовательский элемент с именем 'array-selector' уже был определен. webcomponents-lite.js (168 225)

SCRIPT5022: пользовательский элемент с именем iron-location уже был определен. webcomponents-lite.js (168 225)

SCRIPT5022: пользовательский элемент с именем «iron-query-params» имеет уже определено.

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

Мой сайт построен с использованием следующих компонентов Polymer.json

. 
{
  "entrypoint": "src/index.html",
  "shell": "src/my-app/my-app.html",
  "fragments": [
    "src/my-view/my-view.html"
  ],
  "sources": [
    "src/images/*"
  ],
  "extraDependencies": [
  ],
  "lint": {
    "rules": ["polymer-2"]
  },
  "builds": [{
    "name": "myapp",
    "preset": "es5-bundled",
    "bundle": {
      "inlineCss":false,
      "inlineScripts":true,
      "stripComments":true
    }
  }]
}

index.html 

<script src="webcomponentsjs/webcomponents-loader.js" defer></script>

<script>
     // Load webcomponentsjs polyfill if browser does not support native Web Components
    (function() {
        //'use strict';
        var onload = function() {
            console.log("webcomponents supported.");
            if (!window.HTMLImports) {
                console.log("dispatch event webcomponents ready");
                document.dispatchEvent(
                    new CustomEvent('WebComponentsReady', {
                    bubbles: true
                    })
                );
            }
        };
        var webComponentsSupported = (
            'registerElement' in document &&
            'import' in document.createElement('link') &&
            'content' in document.createElement('template')
        );
        if (!webComponentsSupported) {
            console.log("BROWSER DOES NOT SUPPORT WEB COMPONENTS");
            console.log(" = LOADING POLYFILL");

            window.Polymer = {
                dom: 'shadow',
                lazyRegister: true
            };
      } else {
            var esa = document.createElement('script');
            esa.src = '/webcomponentsjs/custom-elements-es5-adapter.js';
            esa.onload = function() {
                console.log('on load custom elements es5');
            }
            document.head.appendChild(esa);
      }
    })();
  </script>
  • Тогда, если я попытаюсь импортировать my-view, как показано ниже, я получу ошибки ..

Polymer.importHref (this.resolveUrl ('../ my-view / my-view.html'), null, null, true);

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

Проблема не воспроизводится, если я просто связываю свой вид непосредственно с и при этом он не воспроизводится в Chrome, поэтому кажется, что проблема с полифилами в веб-компонентах

1 Ответ

0 голосов
/ 12 января 2019

При асинхронной загрузке с атрибутом defer пакеты полизаполнения будут загружаться асинхронно, что означает, что скрипты и модули, зависящие от API веб-компонентов, должны загружаться с использованием функции WebComponents.waitFor.

Функция WebComponents.waitFor принимает функцию обратного вызова в качестве аргумента и будет оценивать этот обратный вызов после загрузки пакета полизаполнения.

Функция обратного вызова должна загружать сценарии, которые требуют полизаполнения, вот пример: 

<!-- Load polyfills; note that "loader" will load these async -->
<script src="webcomponentsjs/webcomponents-loader.js" defer></script>

<!-- Load a custom element definitions in `waitFor` and return a promise -->
<script type="module">
  WebComponents.waitFor(() => {
    // At this point we are guaranteed that all required polyfills have
    // loaded, and can use web components API's.
    // The standard pattern is to load element definitions that call
    // `customElements.define` here.
    // Note: returning the import's promise causes the custom elements
    // polyfill to wait until all definitions are loaded and then upgrade
    // the document in one batch, for better performance.

    // Here dynamically loading the html (Outside of Polymer) 
    var link = document.createElement('link');
    link.setAttribute('rel', 'import');
    link.setAttribute('href', 'my-view.html');
    link.onload = function() {
           return document.body.appendChild(link);
    }
  });
</script>

<!-- Use the custom element -->
<my-view></my-view>

ЗДЕСЬ ПОЛНАЯ СТАТЬЯ ДЛЯ ВЫШЕ

Внутри полимера, динамический импорт HTML, пример: 

Polymer.import( ['my-view.html'], ()=> {
      // called when our import is fully loaded
      // including any assets like CSS.
});
...