在importHref /safari上已经定义了一个名为'dom-bind‘的自定义元素

Question

我一直有问题的importHref在聚合物(聚合物-2)在边缘和狩猎，在最初的负载，我得到了一系列的错误，如.

SCRIPT5022:已经定义了一个名为“dom-bind”的自定义元素。网页组件-lite.js (168,225) SCRIPT5022:已经定义了一个名为“多姆重复”的自定义元素。网页组件-lite.js (168,225) SCRIPT5022:名为“dom-if”的自定义元素已经定义好了。网页组件-lite.js (168,225) SCRIPT5022:已经定义了一个名为“数组-选择器”的自定义元素。网页组件-lite.js (168,225) SCRIPT5022:已经定义了一个名为“has location”的自定义元素。网页组件-lite.js (168,225) SCRIPT5022:已经定义了一个名为“iron 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)；

不管我尝试导入什么聚合物文件，它总是会导致同样的错误，即使没有导入，在我的视图中。我用错碎片了吗？也不知道为什么会这样。

如果我只是直接将我的视图与铬链接在一起，那么这个问题是不可复制的，因此似乎是一个webcomponents多文档问题。

Answer 1

当用延迟属性以不同步的方式加载时，将异步加载多填充包，这意味着依赖于webcomponents 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.
});