Question

因此，我想在一个html页面中包含几个不相关的Web组件，而我们正在尝试使用Polymer。

每个Web组件本身都能正常工作，但是将多个Web组件结合在一起会引起很多麻烦。

我怎么做才能显示问题：

使用聚合物init创建两个Web组件，然后选择polymer-3-element
确保它们具有不同的名称 window.customElements.define('test-element-a', TestElement); window.customElements.define('test-element-b', TestElement);

我现在要构建它们并将其捆绑（因为我的组件具有一定的依赖性）到1个js文件中……这就是我遇到的问题。我尝试使用以下polymer.json：

{
  "entrypoint": "index.html",
  "shell": "test-element.js",
  "npm": true,
  "lint": {
    "rules": [
      "polymer-3"
    ]
  },
  "builds": [
      { 
        "name": "es6prod",
        "preset": "es6-bundled",
        "addServiceWorker": false,
        "bundle": {
          "inlineCss": true,          
          "inlineScripts": false,      
          "rewriteUrlsInTemplates": true, 
          "sourcemaps": true,     
          "stripComments": true
        }
      }
      ]
}

因此，现在我创建了一个简单的网页，希望将其包括在内：

<html>
    <head><script>/*a whole lot of javascript so the define function is available*/</script>
    </head>
    <body>
        <h1>Testing multiple polymer components</h1>

        <test-element-a></test-element-a>
        <test-element-b></test-element-b>

        <script type="module" src="./polymer-element-a/build/es6prod/test-element.js"></script>
        <script type="module" src="./polymer-element-b/build/es6prod/test-element.js"></script>
    </body>
</html>

这里我有一个问题，只有第一个Web组件加载...第二个，控制台中出现错误：

(index):2 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/polymer-element-b/build/es6prod/test-element.js:1:4222
    at f (http://127.0.0.1:8081/:2:10783)
    at http://127.0.0.1:8081/:2:10676
    at h (http://127.0.0.1:8081/:2:11004)
    at e (http://127.0.0.1:8081/:2:10639)
    at http://127.0.0.1:8081/:2:12620
    at j (http://127.0.0.1:8081/:2:11604)
    at http://127.0.0.1:8081/:2:12602

如果我深入研究，这是因为以下情况发生了两次： customElements.define("dom-module",DomModule)，每个组件一次。

所以，我的问题是：如何构建聚合物网络组件，以便我们使它们可重复使用？

如何构建简单的聚合物Web组件以便可重复使用？

0 个答案: