javascript - 两个自定义元素之间的依赖关系，以及 Polymer serve 的路径

Question

我用 polymer 3.0 创建了 2 个自定义元素(我们称它们为 element-a 和 element-b)。

当我从/my/path/to/element-a 启动“polymer serve”，然后使用浏览器访问 URL“http://127.0.0.1:8081/components/element-a/demo/”时，它们中的每一个都可以正常工作......如果我启动“polymer”，同样的事情从/my/path/to/element-b 服务"，然后访问"http://127.0.0.1:8081/components/element-b/demo/ "

现在我希望“element-b”在某些情况下能够实例化“element-a”。这听起来很容易，但到目前为止我还无法做到这一点。

首先，我发现同时为这两个元素提供服务的唯一方法是从/my/path/to 启动“polymer serve”。然后我在“http://127.0.0.1:8081/components/polymer/element-a/demo/”或“http://127.0.0.1:8081/components/polymer/element-b/demo/”访问我的元素。它有效，但我不确定这是否是正确的方法 (?)

然后，在 element-b.js 中，我尝试像这样向 element-a 添加导入:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '../element-a/element-a.js';

class ElementB extends PolymerElement {
 ...
}

window.customElements.define('element-b', ElementB);

element-a.js 保持不变:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class ElementA extends PolymerElement {
 ...
}

window.customElements.define('element-a', ElementA);

不幸的是，这不起作用:element-b 不再显示，相反我在控制台中收到 javascript 错误:

使用火狐:

NotSupportedError: Operation is not supported dom-module.js:182

使用 Chrome :

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at http://127.0.0.1:8081/components/polymer/element-a/node_modules/@polymer/polymer/lib/elements/dom-module.js:175:16

我对如何使用 polymer-serve 很困惑，我不明白 include 语句中的路径是如何被重写的，除了介绍教程之外我找不到关于这些东西的详细文档 ...

任何帮助、解释或有用的链接将不胜感激! 谢谢，

埃尔韦

Answer 1

试试这个

在组件 A 中

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class ElementA extends PolymerElement {
 static get template{
    return html `<p>This is sample test</p>`
 }
}

window.customElements.define('element-a', ElementA);

在组件b中

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import './element-a.js';

class ElementB extends PolymerElement {
  static get template{
    return html `<element-a></element-b>`
  }
}

window.customElements.define('element-b', ElementB);