自定义元素模板中的 Polymer 3 自定义元素

Question

我有两个组件：A 和 B。我想在 As 模板 getter 中使用我通过常规导入语句导入的自定义元素，例如：

import {LitElement, html} from '@polymer/lit-element';
import B from "./b-element";

export class A extends LitElement {
  ...
  render() {
    return html`Here comes the element <b-element></b-element>`;
  }
}

customElements.define('a-element', A);

元素 B：

import {LitElement, html} from '@polymer/lit-element';

export class B extends LitElement {
  ...
  render() {
    return html`Hello Component B here!`;
  }
}

customElements.define('b-element', B);

现在我当然想在其他地方嵌入 A。

然而 b-element 虽然模块 B 调用了 customElements.define(...)，但在这一点上似乎没有导致它被识别。

Answer 1

这行得通，我注意到自定义元素名称在我的实际代码中无效！不要忘记定义自定义元素名称 in-the-specification 方式！

自定义元素模板中的 Polymer 3 自定义元素

Polymer 3 custom element within a custom element template

polymer

custom-element