Question

我用聚合物3.0创建了2个自定义元素（我们分别称为element-a和element-b）。

当我从/ my / path / to / element-a启动“聚合物服务”，然后使用浏览器访问URL“ http://127.0.0.1:8081/components/element-a/demo/”时，它们中的每一个都能正常工作...如果启动从/ my / path / to / element-b中“聚合物服务”，然后访问“ http://127.0.0.1:8081/components/element-b/demo/”

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

首先，我发现同时服务两个元素的唯一方法是从/ my / path / to启动“聚合物服务”。然后，我访问“ 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错误：

使用firefox：

NotSupportedError：不支持该操作dom-module.js：182

含铬：

未捕获的DOMException：无法在'CustomElementRegistry'上执行'define'：此名称已与该注册表一起使用在http://127.0.0.1:8081/components/polymer/element-a/node_modules/@polymer/polymer/lib/elements/dom-module.js:175:16

我对如何使用Polymer-serve感到非常困惑，我不明白如何重写诸如include语句中的路径，并且除了入门教程之外，我找不到关于这些内容的详细文档... / p>

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

Hervé

Answer 1

尝试一下

In component 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);

In component-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);

两个自定义元素之间的依赖性以及Polymer服务路径之间的关系

1 个答案: