javascript - 如何在另一个中包含自定义聚合物元素

Question

如何在另一个元素中包含自定义聚合物 3 元素？假设我有两个组件：

1) 父组件 2) 子组件

我想在父组件中包含和使用子组件。问题是：我应该将我的子元素放在哪里以及如何配置导入路径？

Answer 1

在您的父元素中添加子元素的导入声明：

import './child-element.js';

然后，在父模板中添加导入元素的引用：

<child-element></child-element>

您的子元素可能类似于：

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

class ChildElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <div>This is you child element</div>
    `;
  }
}

window.customElements.define('child-element', ChildElement);