Question

我在edge和safari中的Polymer（polymer-2）中的importHref上遇到了错误，在初始加载时，我遇到了一系列类似的错误。

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>

然后，如果我尝试按以下方式导入我的视图，则会收到错误消息。.

Polymer.importHref（this.resolveUrl（'../ my-view / my-view.html'），null， null，true）；

无论我尝试导入哪个聚合物文件都不会出现相同的错误，即使在我的视图内没有导入也是如此。我使用的片段是否错误？或知道为什么会这样。

如果仅将我的视图直接链接到中，则该问题无法重现在chrome中也无法重现，因此似乎是一个webcomponents polyfil问题

Answer 1

当使用defer属性异步加载时，polyfill捆绑包将异步加载，这意味着依赖于WebComponents API的脚本和模块必须使用WebComponents.waitFor函数进行加载。

WebComponents.waitFor函数将回调函数作为参数，并在加载polyfill捆绑包后评估该回调。

回调函数应加载需要polyfill的脚本，例如：

<!-- 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>

HERE上面的全文

在聚合物内部，动态导入HTML示例：

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

边缘/野生动物园上的importHref导致“已经定义了名称为“ dom-bind”的自定义元素

1 个答案: