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

Question

How to include custom polymer 3 element inside another? Let's say I have two components:

1) Parent-component 2) Child-component

I would like to include and use child component inside parent component. The question is: where should I put my child element and how to configure import path?

Answer 1

In your parent element add the import declaration of the child element:

import './child-element.js';

Then, add a reference of the imported element in the parent's template:

<child-element></child-element>

Your child element could be like:

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