How to include custom polymer element inside another

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?

score 1 · Answer 1 · answered Jul 02 '18 at 13:18

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

How to include custom polymer element inside another

1 Answers1